Least annoying "Loading ..." for Blazor WebAssembly

%3CLINGO-SUB%20id%3D%22lingo-sub-2940445%22%20slang%3D%22en-US%22%3ELeast%20annoying%20%22Loading%20...%22%20for%20Blazor%20WebAssembly%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2940445%22%20slang%3D%22en-US%22%3E%3CP%3EEveryone%20who%20ever%20worked%20with%20%3CSTRONG%3EBlazor%20WebAssembly%3C%2FSTRONG%3E%20is%20surely%20aware%20what%20horrid%20experience%20is%20waiting%20for%20the%20app%20to%20load%20when%20it%20gets%20some%20bulk%20and%20isn't%20readily%20cached%20or%20loading%20from%20localhost.%20Who%20wants%20to%20stare%20at%20white%20page%20with%20text%20%22Loading%20...%22%20for%20many%20seconds%3F%20No-one%20that's%20who.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EToday%20I've%20made%20some%20progress%20on%20how%20to%20make%20this%20endeavor%20least%20annoying%20(at%20least%20I%20hope).%20Things%20I%20consider%20important%20are%3C%2FP%3E%3CP%3E%F0%9F%9F%A2%20Initial%20page%20load%20must%20be%20blazing%20fast.%20%3D%26gt%3B%26nbsp%3B%3CSTRONG%3ESolved%20with%20server%20prerendering%3C%2FSTRONG%3E%3C%2FP%3E%3CP%3E%F0%9F%9F%A2%20While%20downloading%20and%20hydrating%20user%20must%20not%20make%20any%20clickable%20actions%20so%20it%20doesn't%20spin%20back%20to%20another%20prerendering%20or%20have%20unresponsive%20buttons.%20%3D%26gt%3B%20%3CSTRONG%3ESolved%20with%20fixed%20transparent%20overlay%3C%2FSTRONG%3E%3C%2FP%3E%3CP%3E%3CSTRONG%3E%F0%9F%9F%A2%26nbsp%3B%3C%2FSTRONG%3EUser%20must%20still%20be%20able%20to%20read%20and%20scroll%20content%20and%20have%20some%20feedback%20on%20the%20state%20of%20app%20loading%20%3D%26gt%3B%20%3CSTRONG%3ESolved%20with%20little%20modal%20with%20progress%20bar%20tucked%20to%20the%20bottom%3C%2FSTRONG%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSTRONG%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22z7nF1XVTPy.gif%22%20style%3D%22width%3A%20910px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F325298i73D87912F56C5BB6%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22z7nF1XVTPy.gif%22%20alt%3D%22z7nF1XVTPy.gif%22%20%2F%3E%3C%2FSPAN%3E%3C%2FSTRONG%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3BLet%20me%20know%20what%20you%20think%2C%20or%20do%20you%20have%20better%20approach%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-2940445%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3Eblazor%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
New 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?

0 Replies