How to Effectively Display Loading Indicators During Blazor API Calls?

How to Display a Wait Cursor or Spinner During API Calls in Blazor

Problem:
Long-running API calls in Blazor apps require a way to provide visual feedback to users, such as a wait cursor or loading spinner. However, manually toggling these states using CSS may fail to refresh the page promptly.

Solution 1: Using Task.Delay(1)

• Create an async method to execute the long-running operation.
• Within the async method, use await Task.Delay(1) or await Task.Yield() to flush changes.

private async Task AsyncLongFunc()
{
    spinning = true;
    await Task.Delay(1); // flush changes
    LongFunc(); // non-async code
    currentCount++;
    spinning = false;
    await Task.Delay(1); // flush changes again
}

Solution 2: Using Task.Run() (Not for WebAssembly)

• Wrap the long-running operation in a Task.
• Use await Task.Run() to execute the Task on a separate thread.

async Task AsyncLongOperation()
{
    spinning = true;
    await Task.Run(() => LongOperation());
    currentCount++;
    spinning = false;
}

Considerations for Server-Side Pre-Rendering:

• Spinners will not display in pre-rendered Blazor Server apps.
• To display a spinner, perform the long operation in the OnAfterRenderAsync lifecycle method.

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await Task.Run(() => LongOperation()); // or Task.Delay(0) without Task.Run
        StateHasChanged();
    }
}

The above is the detailed content of How to Effectively Display Loading Indicators During Blazor API Calls?. For more information, please follow other related articles on the PHP Chinese website!