Page loader how to.

[chavu]

I would like to show a page loader while fetching data from backend. I'm follwoing this issuee https://github.com/rjaros/kvision/issues/45 with no success.

I added dependence in build.gradle

        val jsMain by getting {
            resources.srcDir(webDir)
            dependencies {
                implementation(npm("pace-progressbar", "1.0.10"))
                ...
            }
            kotlin.srcDir("build/generated-src/frontend")
        }

I get the error "pace.init is not a fucntion when use the code below in a fucntion.

 private val pace = require("pace-progressbar").default
 pace.init()

[chavu]

I have now seen that there is a kvision pace module and I have added it to build.gradle.

val jsMain by getting {
            resources.srcDir(webDir)
            dependencies {
              implementation("io.kvision:kvision-pace:$kvisionVersion")
              implementation("io.kvision:kvision:$kvisionVersion")
              implementation("io.kvision:kvision-redux-kotlin:$kvisionVersion")
                ...
            }
            kotlin.srcDir("build/generated-src/frontend")
        }

But I get an "unresolved reference" error when I try to add it to the main() fucntion as below.

fun main() {
    startApplication(
        ::App,
        module.hot,
        BootstrapModule,
        BootstrapCssModule,
        CoreModule,
        FontAwesomeModule,
        TabulatorModule,
        TabulatorCssBootstrapModule,
        TomSelectModule,
        PaceModule,
    )
}

Assuming the module is already included in one of the modules I went ahead and called it in a function as below but I am not seeing any loader appearing.

        pace.init()
        pace.start()

[rjaros]

Please check: https://github.com/rjaros/kvision-realworld-example-app/blob/master/src/main/kotlin/io/realworld/App.kt#L29-L30

[rjaros]

After setting pace to manual mode, you can e.g. use a function like this: https://github.com/rjaros/kvision-realworld-example-app/blob/master/src/main/kotlin/io/realworld/helpers/Progress.kt

[chavu]

Thanks I am able to see the loader now.