Any recommendations for implementing a loading indicator on a large WASM page? I love what a rich-c...

# webassembly

[darkmoon_uk]

Any recommendations for implementing a loading indicator on a large WASM page?

I love what a rich-client WASM site can do, and think they're worth the load times, but an indicator would make things 10x nicer for users.

[PHondogo]

I'm using such style for that

index.html

[darkmoon_uk]

Cool, thanks for sharing this @PHondogo

[Michael Paus]

@PHondogo Please forgive my ignorance but how do you hide the progress bar once the app is running?

[PHondogo]

Hi @Michael Paus!
There is id for progress element

<progress id="loading" class="pure-material-progress-linear"></progress>

Element can be removed by id when on main execute (or later depends on one's needs)

fun main() {
  document.getElementById("loading")?.remove()
  ...
}

[Michael Paus]

Cool. It works now but I only see the progress bar in Firefox now. In Chrome the app seems to load too quickly to see it, although I have deleted the cached files (at least I hope so).

[PHondogo]

You can move deletion closer to start of compose render.
Like so:

CanvasBasedWindow(
   canvasElementId = ...
) {
  LaunchedEffect(Unit) {
    document.getElementById("loading")?.remove()
  }
  ...
}

[Aru Jeganathan]

This solution got me half way to what I wanted. I wanted an actual progress bar that displays how much of the wasm files have been downloaded so far. I was planning to get their sizes by making a HEAD request in the beginning and then add a hook to window.fetch to updated the downloaded progress.

The only problem I have is knowing what the name of the generated wasm files after the build. I have 34c419f6b094bce32a6d.wasm and dd568dbcd078c0adf7cf.wasm right now. Is there a way to find these names during the gradle build?