Showing a loading animation before the wasm is loaded.

[dzamlo]

In most example of pure CSR app, the page is blank until the Wasm is loaded. This can be a problem on slow connections. I think ii is better to show a loading animation while the Wasm is loading.

You can make a loading animation in only HTML+CSS (no JS needed). If you search "CSS loading animation", you can find a lot of examples. The one I use is in the first link below. You can add it to the index.html used by Trunk.

Then, in your rust code, before mounting the app, you simply remove the whole content of the body. The code for that is in the second link.

The actual code for my example are available at:
https://gitlab.com/dzamlo/mino/-/blob/main/index.html?ref_type=heads#L134-162
https://gitlab.com/dzamlo/mino/-/blob/main/src/main.rs?ref_type=heads#L255-262

I think maybe this pattern should be used in the examples or at least shown somewhere in the docs. But I don't know where.

[lukexor]

I also found a loading indicator to be desirable, esp in development with debug as the wasm size is so large so having a documented example to point users to would be great.

For SSR, I've been using this:

    // Indicator page is still hydrating
    let (is_hydrating, set_is_hydrating) = signal(true);
    Effect::new(move |_| {
        set_is_hydrating.set(false);
    });

And then in a header component for example (uses the spinner from thaw, but any sort of loading indicator would work):

    <Show when=move || is_hydrating.get()>
        <Spinner attr:title="Page is still loading..." size=SpinnerSize::ExtraSmall />
    </Show>