Best practice to run synchronous and asynchronous work on button click in Blazor

Question

Let's assume that I want to run two bits of work on button click and they both take some time. First bit is not thread-safe, so it is not feasible to make it async. Second bit is awaited. I want UI to acknowledge right away that the button was clicked and for instance disable it. Is there a better approach than slamming await Task.Yield(); after isBusy = true;, or this is the way?

@using System.Threading;

<MudButton OnClick="DoSomethingAsync" Disabled="@isBusy">Do something</MudButton>

@code {
    bool isBusy;

    async Task DoSomethingAsync()
    {
        isBusy = true;
        
        Thread.Sleep(2000); // simulate sync work
        
        await Task.Delay(2000); // simulate async work
        
        isBusy = false;
    }
}

https://try.mudblazor.com/snippet/waGHOLGOHpPUkLLM

I know that ideally, all long-running operations would be asynchronous and wouldn't block the UI thread. But I want to know valid approach, if I have a synchronous operation that can't be run off the main thread and can't be converted to asynchronous task.

Answer 1

I want UI to acknowledge right away that the button was clicked and for instance disable it. Is there a better approach than slamming await Task.Yield(); after isBusy = true;,

I prefer Task.Delay(1) over Task.Yield() but for the rest this is the best/only way to do what you want on WebAssembly.

On Blazor Server you can execute the blocking code on another Thread:

await task.Run(() => {  Thread.Sleep(2000); });

I would still put a Delay(1) after setting isBusy but it might work without that.

Answer 2

Is there a better approach than slamming await Task.Yield(); after isBusy = true;, or this is the way?

You aren't Slamming anything. You're setting where the first yield happens, and thus the intermediate "I'm Busy" render occurs.

Here's a detailed explanation of what's happening.

Some background information:

• All BLazor UI code [lifecycle methods, UI events an callbacks] is executed on a Synchronisation Context [SC from now on], which enforces a single logical thread of execution.

• In ComponentBase inherited components, UI events are handled by the registered IHandleEvent.HandleEventAsync. This is a simplified version.

    async Task IHandleEvent.HandleEventAsync(EventCallbackWorkItem item, object? obj)
    {
        var uiTask = item.InvokeAsync(obj);

        var isCompleted = uiTask.IsCompleted || uiTask.IsCanceled;

        if (!isCompleted)
        {
            this.StateHasChanged();
            await uiTask;
        }

        this.StateHasChanged();
    }

When the button gets clicked and the renderer handles the event.

IHandleEvent.HandleEventAsync is invoked and passed the registered handler [DoSomethingAsync].

It invokes DoSomethingAsync

        var uiTask = item.InvokeAsync(obj);

The first two lines of DoSomethingAsync are a synchronous block so run and block the SC.

        isBusy = true;
        
        Thread.Sleep(2000); // simulate sync work

After 2000 ms, we reach the await:

        await Task.Delay(2000); // simulate async work

This creates a continuation on the SC, and yields.

This code block in IHandleEvent.HandleEventAsync now runs. It queues a render request on the Renderer's queue and yields [if uiTask han't completed]. The Renderer gets control of the SC, services it's queue and renders the component.

        var isCompleted = uiTask.IsCompleted || uiTask.IsCanceled;

        if (!isCompleted)
        {
            this.StateHasChanged();
            await uiTask;

After 2000 ms:

        await Task.Delay(2000); // simulate async work

completes and the contination runs to completion.

        isBusy = false;

In IHandleEvent.HandleEventAsync

uiTask is now completes so:

       this.StateHasChanged();

runs and queues a render. The SC is free so the renderer services it's queue and renders the component.

If you're running on Blazor Server, you can offload your sync task to the threadpool. If not, then you're stuck with the SC.