Blazor server-side app blank screen while initially connecting

Question

I have a Blazor server-side application that could be viewed by users from remote regions with slower internet connections to the server. After typing the URL in the browser, it displays a blank screen for a few seconds and then my loading animation shows up, and then content loads.

Loading animation is what I have on the page while waiting for the API call to return data. Nothing special. However, what about the blank screen? Is that when the browser is attempting to establish SignalR connection to the server?

I am OK with the slow speed, but is there a way to also use a loading animation while this connection is established? A blank screen is not ideal at all.

Thanks for any advice.

Answer 1

How about change the loading indicator to be visible from start and if you have a bool field it will be true initially. That way as soon as page is displayed you would see the loading screen and after the API data is fetched you can mark it as hidden.

Some example code for a razor below:

@if (IsLoading)
{
    <div class="loader">Loading...</div>
}


@code {
    public bool IsLoading { get; set; } = true;

    protected override async Task OnInitializedAsync()
    {
        await _apiClient.Get(...);
        IsLoading = false;
    }
}