Live Chat Icon For mobile
Live Chat Icon

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

Platform: Blazor| Category: General

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.


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

@code {

    bool contentLoaded;

    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.


       <Router . . .
                . . .
                . . .

Please refer to this link for more details.

View Sample in GitHub

Share with

Related FAQs

Couldn't find the FAQs you're looking for?

Please submit your question and answer.