How do I show/customize a loading screen while loading a Blazor Server app?

In the following example, LoadingScreen will display a loading message while data is loaded asynchronously. Once the data has been loaded, it replaces the loading message with the actual content.

[LoadingScreen.razor]

@if (contentLoaded)
{
    @ChildContent
}
else
{
     <div style="position:absolute; top:30vh; width:100%; text-align:center">
         <h3>Blazor Server Application</h3>
         <p>The application is loading...</p>
     </div>
}

@code {

    bool contentLoaded;

    [Parameter]
    public RenderFragment ChildContent { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await Task.Delay(4000);
        contentLoaded = true;
    }
}

Wrap the Router in the LoadingScreen to show the loading screen in the Blazor app.

[App.razor]

<LoadingScreen>
       <Router . . .
                . . .
                . . .
        </Router>
</LoadingScreen>

Please refer to this link for more details.

View Sample in GitHub