A long running process in OnInitializedAsync causes the page load to increase accordingly in Blazor Server. Pls update guidance

[mayur-ekbote]

If there is a long running process in OnInitializedAsync then the page load time increases by the amount of time it takes for the process to run.

Consider this:

@page  "/"

@if (isLoading)
{
    <div>Loading...</div>
}
else
{
    <div>Loaded</div>
}

@code {
    bool isLoading;

    protected override async Task OnInitializedAsync()
    {
            isLoading = true;
            await LoadDataAsync();
            isLoading = false;
    }

    private Task LoadDataAsync()
    {
        return Task.Delay(50_000);

    }
}

This page will take 50 seconds to load - i.e. the user will see nothing on the browser for 50 seconds. After that it will show the page with "Loading..." for 50 seconds before changing to "Loaded".

I assume that this is because Blazor Server renders the page twice - and the second pass starts only after first pass fully completes OnInitializedAsyc call.

But going by the guidance in the docs and the boilerplate "FetchData" example, this is the way to show "placeholder" for long running process.

The only thing that works as expected (immediate page load with "Loading..." message) is the following:

    protected override void OnInitialized()
    {
        Task.Run(async () => {
            await Task.Delay(50000);
            isLoading = false;
            await InvokeAsync(StateHasChanged);
        });
    }

However, this kind of defeats the purpose of OnInitializedAsyc.

Has this behaviour changed recently?

[javiercn]

@mayur-ekbote thanks for contacting us.

I imagine you are prerendering, and in that case, what's happening is that during prerendering the app waits for "quiescence", which means it won't render until all components have finished rendering (in your case one component takes 50 seconds). This is the same as if you were rendering the page in MVC or Razor Pages.

Then, the app will become interactive and the first interactive render will happen, taking another 50 seconds and rendering the Loading bit.

This has always been the behavior. There are two things you can do:

• Use streaming rendering to avoid waiting for the async task to complete when prerendering, so that you can display the loading bit.
• Save the results from your query/task into PersistentComponentState so that they can be reused when the app performs the interactive render to avoid the flickering.

[mayur-ekbote]

Thank you for your prompt reply.

I imagine you are prerendering, and in that case, what's happening is that during prerendering the app waits for "quiescence", which means it won't render until all components have finished rendering (in your case one component takes 50 seconds). This is the same as if you were rendering the page in MVC or Razor Pages.

Yes. This is what I suspected was happening.

I assume that this is because Blazor Server renders the page twice - and the second pass starts only after first pass fully completes OnInitializedAsyc call.

I will explore the option 1 because I am more concerned about immediate loading of the page than the state/redraw.
IIRC, streaming was introduced only in the .net 8. I have been using Blazor since .net 5 and never checked that option because I never noticed this.

However, as we close this, I would request that the linked doc could be updated to that effect. Currently, it gives the impression that the server renders and serves the page to the browser while it waits for the async call to complete. After completion of the call, it renders again.

[javiercn]

@guardrex can you update the doc with the appropriate clarification?