How to deal with slow OnInitializedAsync blocking first render?

[davidroth]

Slow data loading in OnInitializedAsync works nicely by just using the "Loading ..." pattern:

@if(loaded)
{
    <p>Done!</p>
}
else
{
    <p>Loading ...</p>
}


@code {
    private bool loaded = false;

    protected override async Task OnInitializedAsync()
    {
        await Task.Delay(2000);
        loaded = true;
    }
}

Unfortunately, when the user first visits the page, the page does not get rendered until the Task in OnInitializedAsync completes.
In my example above, the user will see a white page for 2 seconds.

Once the page is rendered the first them, switching between the pages works as expected.

Questions:

• I could not find this behaviour being documented? Any hints?
• Whats the most clean way to mitigate this?

See attached video where you can see the initial 2 second delay when loading the app:

blazor-slow.mp4

[Xyncgas]

display iframe of your choosing until you have something to show

[Xyncgas]

Alternatively, use var _ = Task.Start(async delegate { await Task.Delay(2000); await this.InvokeAsync(StateHasChanged);}) to do whatever you want to do while showing your component instead of showing loading... which is not your component

It triggers re-rendering of your component once it's finished background tasking which at the moment may change states of your component so it has something new to show in the next rendering

background tasks is possible by registering to IHostedService in the C# code of the blazor project too (the start up)

[davidroth]

I am aware of the workaround to not await the task in OnInitializedAsync (Like the discard approach in your response).

However, I was searching for
A) An explanation why the behaviour is different for initial load and subsequent load + documentation
B) A clean /generic workaround

[Xyncgas]

A Maybe you can just assume rendering doesn't finish until first OnInitializedAsync is finished so you got something on screen, further re-rendering is hot rendered
if one day you don't see this behavior anymore just assume they changed it

B Put your stuff in afterrenderasync first render

I too wonder there is document saying component doesn't finish rendering when awaiting in OnInitializedAsync for the first

[Runaho]

Hello @davidroth 👋🏻
OnInitializedAsync method is actually like an async constructor. Therefore, the rendering process will not finish.
If you want to do something after the rendering is complete, the OnAfterRenderAsync method will be more accurate , just like @Xyncgas said.

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/lifecycle?view=aspnetcore-7.0

[Xyncgas]

Thanks

[davidroth]

I investigated this further and now it makes perfect sense.
I used the BlazorServer template which renders the component with "ServerPrerendered". So on the first request the component is rendered on the server and html is returned. Then the app initialises the websocket circuit and renders again using the websocket connection. It is configured in "_Host.cshtml".

This makes it perfectly clear why I see this initial delay when I press "F5" in the browser.
If I change the "render-mode" to "server", the app responds immediately and everything is as expected.

[Runaho]

This is probably due to the nature of Blazor working with SignalR.

I think that when Blazor Server is working through SignalR, it only sends the changes on the page in async manners. Because of this you cannot see the thread locking. It is actually locking but you receive the results diff. I think this is the way it is, based on my experience, Of course, technically it can be explained in much more detail :)