What is the recommended way to release the UI from a long running background task in Blazor client-side

Question

Our Blazor (client-side) app is made up of many components all existing on the UI at the same time. One of these has to do a number of large data calls to Azure SQL. This component does these calls regardless of whether it has UI focus or not. Each of calls these can take up to 3 seconds to return its result during which it renders the UI unresponsive. How can we keep the UI responsive during these calls without using Blazor server-side. Using Task.Run etc does not help in single threaded architecture. Using loading spinners is also not an option as this still leaves the UI unresponsive and may not be visible to the user. Is there any way to achieve this goal in current Blazor 0.9.0?

Running latest Blazor preview release (0.9.0-preview3-19154-02)

Answer 1

You can use Invoke, I modified counter example page to illustrate it, you will need a kind of singleton DI object to avoid running the process for twice.

Remember Blazor is an experimental project. Also, this answer is also an experimental approach.

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" onclick="@IncrementCount">Click me</button>

@functions {
    int currentCount = 0;

    void IncrementCount()
    {
        currentCount++;
    }

    protected  override void OnInit()
    {
        Invoke(
            //here your task.
            async () =>
            {
                for(var i =0; i< 50; i++)
                {
                    await Task.Delay(1000);
                    currentCount++;
                    StateHasChanged();                    
                    System.Console.WriteLine("Still running ...");
                }
            });
    }
}

Answer 2

If async calls does not help then you can use browser workers, just need to implement some js interop.