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.

[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.

Share with

Share on twitter
Share on facebook
Share on linkedin

Related FAQs

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

Please submit your question and answer.