When running a wasm app with compose, theres alway...

# webassembly

[Pau Marzo]

When running a wasm app with compose, theres always the blank page before the content is loaded. I think this is coming from loading wasm files (correct me if im wrong). Is there any way to make that blank page shorter in time? In mobile browsers, that time increases more than i desktop. Is there any optimization we can make or if in the future this will improve?

[Pablichjenkov]

I am here to listen for solutions. I was wondering how to implement a splash screen similar concept in the web.
Perhaps sending the response in 2 steps, something like an http stream. First the splash then the actual page.
Or perhaps doing a redirect based on some header/cookie sent by the page. When the header indicates it hasn't been loaded, the server will send back the splash screen then redirect to the endpoint that will send the App.js compiled file.

[Chrimaeon]

“Splashscreen” would be easy. just put a div with a loading spinner in your html file and remove the div node from the page from inside your compose when you render the screen.

[Pablichjenkov]

I guess the first request goes always for index.html file but then how to know where the page loads the full composeApp.js file? If you show an example it would be really helpful.

[Chrimaeon]

in your main you should have something like this

renderComposable(container) {
   App()
}

that code is from compose html but you should have something similiar for compose web. at that point you can be sure your wasm file is loaded because it executes the code. right before that or inside your App remove the div from the dom tree with something like

document.querySelector("#page-loader")?.remove()

[Chrimaeon]

you can see it on my homepage https://www.cmgapps.com/ if you use throtteling via browser dev tools.

[Pablichjenkov]

I see, compose-js has onWasmReady() not sure if the same tho

[Pablichjenkov]

Yes I am able to see it right. I will play around with your suggestion.

[Pau Marzo]

for WasmJs

@OptIn(ExperimentalComposeUiApi::class)
fun main() {

    document.getElementsByClassName("loader-container")[0]?.remove()
    ComposeViewport(document.body!!) {
        App()
    }
}