Least annoying "Loading ..." for Blazor WebAssembly

Copper Contributor

Everyone who ever worked with Blazor WebAssembly is surely aware what horrid experience is waiting for the app to load when it gets some bulk and isn't readily cached or loading from localhost. Who wants to stare at white page with text "Loading ..." for many seconds? No-one that's who.

 

Today I've made some progress on how to make this endeavor least annoying (at least I hope). Things I consider important are

🟢 Initial page load must be blazing fast. => Solved with server prerendering

🟢 While downloading and hydrating user must not make any clickable actions so it doesn't spin back to another prerendering or have unresponsive buttons. => Solved with fixed transparent overlay

🟢 User must still be able to read and scroll content and have some feedback on the state of app loading => Solved with little modal with progress bar tucked to the bottom

 

z7nF1XVTPy.gif

 

 Let me know what you think, or do you have better approach?

1 Reply
Sorry for being late to the party, but I even registered here just to ask you this:
Where can we find the source code for your example shown above or can you at least provide us with the relevant snippets, please?