Menu
Before .Net 8, I could set a splash screen in the index.html file and tag in the body part. In the new templates there isn't a index.html file anymore.
I can find a lot of info about the old pre .Net 8 structures but not a lot about .Net 8 and the provided templates are very basic.
Does somebody know how to set a splash screen in the new project layout? (I'm using the global wasm option).
Before I had something like this in my index.html file (.net 7 and before)
<body>
<app id="app">
<div style="width: 100%">
<div class="p-5 bg-light border rounded-3 marginTop20px marginLeft20px marginRight20px mb-3 jumbotron">
<h2>Please wait while the application is loading</h2>
</div>
</div>
</app>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js" asp-append-version="true"></script>
The application is a .Net core hosted project but with the global wasm option.
245
asked Oct 20 '25 15:10
You need to detect pre-rendering and show a Splash component before the client side SPA re-renders the page.
builder.AddBlazrRenderStateServerServices();
builder.AddBlazrRenderStateWASMServices();
With these added, you have access to IBlazrRenderStateService and it's IsPreRender bool property in both server side and client side contexts.
Create a Splash.razor in the client project.
<div class="alert alert-primary m-5">
BIG SPLASH
</div>
Modify Router to:
Splash component if the page is pre-rendered. Note the return to early exit.@using Blazr.RenderState
@inject IBlazrRenderStateService RenderState
@if (RenderState.IsPreRender)
{
<Splash />
return;
}
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(Layout.MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
</Router>
This works for any page in the SPA. F5 on counter shows the splash screen.
Note: Blazr.RenderState is mine. You can grab the code if you don't want to use the packages from here: https://github.com/ShaunCurtis/Blazr.RenderState.
135
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
