In Blazor WASM standalone app it is easy, because there is dedicated element for that:
<div id="app">Loading...</div>
And it gets replaced once the the app is loaded.
In Blazor on .NET 8 it is a different story. Consider these two pages:
@page "/home"
@page "/wasmPage"
@rendermode @(new InteractiveWebAssemblyRenderMode(prerender: false))
When transitioning from /home
to /wasmPage
Blazor removes the content of <main>
, replace it with bl-load
comment and starts loading the necessary files...
We have no element to show the Loading...
message.
Is there anything to subscribe to?
Sources, I've discovered:
--blazor-load-percentage
css variable appears. I can think of a solution with checking the presence, etc, but I hope there is a better way.After the discussion with @MrC aka Shaun Curtis
it is obvious that the solution exists - using pre-rendered page. Basically placing the Loading...
only when page is generated on the server (pre-rendered). (similar question on SO). That does not include my case when pre-render is set to false. I would still like to see if any solution exists.
Any ideas?
Finally figure out a good solution:
<div class="[&>*:last-child:not(:first-child)]:hidden">
@Body
<div >
Loading...
</div>
</div>
It hides the last element (Loading...), but only when it isn't also the first element.
In other words: Shows the Loading...
, until @Body is populated.