search

trunk-rs / trunk

Build, bundle & ship your Rust WASM application to the web.
https://trunkrs.dev/
Apache License 2.0
3.53k stars 255 forks source link

Display "Loading..." or similar while wasm is being downloaded and compiled #418

Closed ISibboI closed 1 year ago

ISibboI commented 2 years ago

Hi, thank you so much for creating trunk! It makes deploying wasm so much easier and more enjoyable!

My wasm application takes a few seconds to load, and during loading the browser only shows a white page, appearing broken to potential users. It would be nice to instead allow to configure some text that is displayed during loading (and ideally to style that text, or display an image instead, etc).

I would be totally satisfied with a CLI argument like trunk serve --loading-text "Loading...".

Alternatively, it would be nice if the link tag could support onload, such that loading animations can be manually removed by the user like e.g. this: <link data-trunk rel="rust" href="Cargo.toml" data-wasm-opt="z" data-bin="..." onload="document.querySelector('#loading_bar').remove()"/>

simbleau commented 2 years ago

I'm not entirely sure I support this.

On one hand, --loading-text 'Loading...' is too biased. What if I want an animated spinner for loading? It's not text.

I also think the current solution is flexible already. Anything put in the <body> will get replaced by Trunk automatically. So if you want a loading text, just put your loading modal there.

For example, on my website, the index.html body has an animated spinner, and that gets replaced when the WASM loads.

ISibboI commented 2 years ago

I also think the current solution is flexible already. Anything put in the <body> will get replaced by Trunk automatically. So if you want a loading text, just put your loading modal there.

For example, on my website, the index.html body has an animated spinner, and that gets replaced when the WASM loads.

Hm, for me, using trunk 0.16.0, the body is not replaced after the wasm file was loaded. I tried placing a <p>Loading...</p> before or after the <link> in the body, but it stays there after my wasm stuff is showing up already. I am using Brave v1.42.97 (Aug 17th, 2022) based on Chromium 104.0.5112.102.

However, if that behavior would work, then it would already be everything I would need.

simbleau commented 2 years ago

The link goes in the head.

For a good example, see https://github.com/simbleau/website/blob/e29ad56dc1cecd78a0e949cc267deb6aa1d068df/index.html#L68

I can't help much without seeing your code.

ISibboI commented 2 years ago

Thanks!

I have put the link into the head, but to no avail. The body is not emptied when the WASM is loaded.

I created an example project: https://github.com/ISibboI/debug-trunkrs

I put the link into the head, and a simple <p>Loading...</p> into the body. After the WASM stuff loads and shows up, the text Loading... is still there. (Note that to make it show up, you have to move the mouse around the browser, this is a current limitation of the UI framework I am using I believe).

Do you get the same behavior? If yes, it might be an incompatibility with the UI framework.

github-actions[bot] commented 1 year ago

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

github-actions[bot] commented 1 year ago

This issue was closed because it has been stalled for 5 days with no activity.