Display wait or spinner on API call

Question

In my Blazor app I am making an API call to a back end server that could take some time. I need to display feedback to the user, a wait cursor or a "spinner" image. How is this done in Blazor?

I have tried using CSS and turning the CSS on and off but the page is not refreshed until the call is completed. Any suggestions would be greatly appreciated.

@functions {
    UserModel userModel = new UserModel();
    Response response = new Response();
    string errorCss = "errorOff";
    string cursorCSS = "cursorSpinOff";

    protected void Submit()
    {
        //Show Sending...
        cursorCSS = "";
        this.StateHasChanged();
        response = Service.Post(userModel);
        if (response.Errors.Any())
        {
            errorCss = "errorOn";
        }
        //turn sending off
        cursorCSS = "cursorSpinOff";
        this.StateHasChanged();
    }
}

Answer 1

Option 1: Using Task.Delay(1)

• Use an async method.
• Use await Task.Delay(1) or await Task.Yield(); to flush changes

private async Task AsyncLongFunc()    // this is an async task
{
    spinning=true;
    await Task.Delay(1);      // flushing changes. The trick!!
    LongFunc();               // non-async code
    currentCount++;
    spinning=false;
    await Task.Delay(1);      // changes are flushed again    
}

Option 1 is a simple solution that runs ok but looks like a trick.

Option 2: Using Task.Run() (not for WebAssembly)

On January'2020. @Ed Charbeneau published BlazorPro.Spinkit project enclosing long processes into task to don't block the thread:

Ensure your LongOperation() is a Task, if it is not, enclose it into a Task and await for it:

async Task AsyncLongOperation()    // this is an async task
{
    spinning=true;
    await Task.Run(()=> LongOperation());  //<--here!
    currentCount++;
    spinning=false;
}

---

Effect

Spinner and server side prerendering

Because Blazor Server apps use pre-rendering the spinner will not appear, to show the spinner the long operation must be done in OnAfterRender.

Use OnAfterRenderAsync over OnInitializeAsync to avoid a delayed server-side rendering

    // Don't do this
    //protected override async Task OnInitializedAsync()
    //{
    //    await LongOperation();
    //}

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

More samples

Learn more about how to write nice spinner you can learn from open source project BlazorPro.Spinkit, it contains clever samples.

More Info

Answer 2

Lot's of great discussion surrounding StateHasChanged(), but to answer OP's question, here's another approach for implementing a spinner, universally, for HttpClient calls to a backend API.

This code is from a Blazor Webassembly app...

Program.cs

public static async Task Main(string[] args)
{
    var builder = WebAssemblyHostBuilder.CreateDefault(args);
    builder.RootComponents.Add<App>("#app");
    
    builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
    builder.Services.AddScoped<SpinnerService>();
    builder.Services.AddScoped<SpinnerHandler>();
    builder.Services.AddScoped(s =>
    {
        SpinnerHandler spinHandler = s.GetRequiredService<SpinnerHandler>();
        spinHandler.InnerHandler = new HttpClientHandler();
        NavigationManager navManager = s.GetRequiredService<NavigationManager>();
        return new HttpClient(spinHandler)
        {
            BaseAddress = new Uri(navManager.BaseUri)
        };
    });

    await builder.Build().RunAsync();
}

SpinnerHandler.cs
Note: Remember to uncomment the artificial delay. If you use the out-of-the-box Webassembly template in Visual Studio, click the Weather Forecast to see a demo of the spinner in action.

public class SpinnerHandler : DelegatingHandler
{
    private readonly SpinnerService _spinnerService;

    public SpinnerHandler(SpinnerService spinnerService)
    {
        _spinnerService = spinnerService;
    }

    protected override async Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)
    {
        _spinnerService.Show();
        //await Task.Delay(3000); // artificial delay for testing
        var response = await base.SendAsync(request, cancellationToken);
        _spinnerService.Hide();
        return response;
    }
}

SpinnerService.cs

public class SpinnerService
{
    public event Action OnShow;
    public event Action OnHide;

    public void Show()
    {
        OnShow?.Invoke();
    }

    public void Hide()
    {
        OnHide?.Invoke();
    }
}

MainLayout.razor

@inherits LayoutComponentBase

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <div class="main">
        <div class="top-row px-4">
            <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
        </div>

        <div class="content px-4">
            @Body
            <Spinner />
        </div>
    </div>
</div>

Spinner.razor
Note: To add some variety, you could generate a random number in the OnIntialized() method, and use a switch statement inside the div to pick a random spinner type. In this method, with each HttpClient request, the end user would observe a random spinner type. This example has been trimmed to just one type of spinner, in the interest of brevity.

@inject SpinnerService SpinnerService

@if (isVisible)
{
    <div class="spinner-container">
        <Spinner_Wave />
    </div>
}

@code
{
    protected bool isVisible { get; set; }

    protected override void OnInitialized()
    {
        SpinnerService.OnShow += ShowSpinner;
        SpinnerService.OnHide += HideSpinner;
    }

    public void ShowSpinner()
    {
        isVisible = true;
        StateHasChanged();
    }

    public void HideSpinner()
    {
        isVisible = false;
        StateHasChanged();
    }
}

Spinner-Wave.razor
Credit to: https://tobiasahlin.com/spinkit/
Note: There is a Nuget package for this spin kit. The drawback to the Nuget package is that you don't have direct access to the CSS to make tweaks. Here I've tweaked thee size of the spinner, and set the background color to match the site's primary color, which is helpful if you are using a CSS theme throughout your site (or perhaps multiple CSS themes)

@* Credit: https://tobiasahlin.com/spinkit/ *@

<div class="spin-wave">
    <div class="spin-rect spin-rect1"></div>
    <div class="spin-rect spin-rect2"></div>
    <div class="spin-rect spin-rect3"></div>
    <div class="spin-rect spin-rect4"></div>
    <div class="spin-rect spin-rect5"></div>
</div>
<div class="h3 text-center">
    <strong>Loading...</strong>
</div>

<style>
    .spin-wave {
        margin: 10px auto;
        width: 200px;
        height: 160px;
        text-align: center;
        font-size: 10px;
    }

        .spin-wave .spin-rect {
            background-color: var(--primary);
            height: 100%;
            width: 20px;
            display: inline-block;
            -webkit-animation: spin-waveStretchDelay 1.2s infinite ease-in-out;
            animation: spin-waveStretchDelay 1.2s infinite ease-in-out;
        }

        .spin-wave .spin-rect1 {
            -webkit-animation-delay: -1.2s;
            animation-delay: -1.2s;
        }

        .spin-wave .spin-rect2 {
            -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s;
        }

        .spin-wave .spin-rect3 {
            -webkit-animation-delay: -1s;
            animation-delay: -1s;
        }

        .spin-wave .spin-rect4 {
            -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s;
        }

        .spin-wave .spin-rect5 {
            -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s;
        }

    @@-webkit-keyframes spin-waveStretchDelay {
        0%, 40%, 100% {
            -webkit-transform: scaleY(0.4);
            transform: scaleY(0.4);
        }

        20% {
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
        }
    }

    @@keyframes spin-waveStretchDelay {
        0%, 40%, 100% {
            -webkit-transform: scaleY(0.4);
            transform: scaleY(0.4);
        }

        20% {
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
        }
    }
</style>

It's beautiful

Updates 2023:

In practice I've found it useful to have the SpinnerService listen for LocationChanged events from the NavigationManager. In this way, if the user navigates away from the page having the wait spinner, it can be appropriately hidden, and not carry over to the next page.

**SpinnerService.cs**

internal sealed class SpinnerService : ISpinnerService, IDisposable
{
    private readonly NavigationManager _navMan;
    private bool _holdSpinner = false;

    public SpinnerService(NavigationManager navigationManager)
    {
        _navMan = navigationManager;
        _navMan.LocationChanged += LocationChanged;
    }

    public event Action? OnShow;
    public event Action? OnHide;

    public void Show()
    {
        OnShow?.Invoke();
    }

    public void Hide()
    {
        OnHide?.Invoke();
    }

    private void LocationChanged(object? sender, LocationChangedEventArgs e)
    {
        Hide();
    }

    public void Dispose()
    {
        _navMan.LocationChanged -= LocationChanged;
    }
}

Also, in the Spinner.razor, it is best practice to implement IDisposable and to unsubscribe from the SpinnerService's events.

**Spinner.razor**

@inject SpinnerService SpinnerService
@implements IDisposable

@if (isVisible)
{
    <div class="spinner-container">
        <Spinner_Wave />
    </div>
}

@code
{
    protected bool isVisible { get; set; }

    protected override void OnInitialized()
    {
        SpinnerService.OnShow += ShowSpinner;
        SpinnerService.OnHide += HideSpinner;
    }

    public void ShowSpinner()
    {
        isVisible = true;
        StateHasChanged();
    }

    public void HideSpinner()
    {
        isVisible = false;
        StateHasChanged();
    }

    public void Dispose()
    {
        SpinnerService.OnShow -= ShowSpinner;
        SpinnerService.OnHide -= HideSpinner;
    }
}

Answer 3

To answer the notice in @daniherrera's solution, there is three more elegant solution proposed here.

In short :

• Implement INotifyPropertyChanged to the Model and invoke StateHasChanged() on a PropertyChangedEventHandler event property from the Model.
• Use delegates to invoke StateHasChanged() on the Model.
• Add a EventCallBack<T> parameter to the component or page of the View and assign it to the function that should change the render of the component and their parents. (StateHasChanged() isn't necessary in this one`)

The last option is the most simple, flexible and high level, but choose at your convenience.

Overall, I'll advise to use one of those solutions presented more than the await Task.Delay(1); one if security of your app is a concern.

Edit : After more reading, this link provide a strong explanation on how to handle events in C#, mostly with EventCallBack.

Answer 4

Not just for API call, but for every service call:

SpinnerService:

 public class SpinnerService
 {
    public static event Action OnShow;
    public static event Action OnHide;

    public void Show()
    {
        OnShow?.Invoke();
    }

    public void Hide()
    {
        OnHide?.Invoke();
    }
}

Spinner component:

Your spinner hier, in my case I have MudProgressCircular

@if (IsVisible)
{
    <MudProgressCircular Color="Color.Primary"
                         Style="position: absolute;top: 50%;left: 50%;"
                         Indeterminate="true" />
}

@code{
    protected bool IsVisible { get; set; }

    protected override void OnInitialized()
    {
        SpinnerService.OnShow += ShowSpinner;
        SpinnerService.OnHide += HideSpinner;
    }

    public void ShowSpinner()
    {
        IsVisible = true;
        StateHasChanged();
    }

    public void HideSpinner()
    {
        IsVisible = false;
        StateHasChanged();
    }
}

ServiceCaller:

public class ServiceCaller
{
    private readonly IServiceProvider services;
    private readonly SpinnerService spinnerService;

    public ServiceCaller(IServiceProvider services, SpinnerService spinnerService)
    {
        this.services = services;
        this.spinnerService = spinnerService;
    }

    public async Task<TResult> CallAsync<TService, Task<TResult>>(Func<TService, TResult> method)
        where TService : class
    {
        var service = this.services.GetRequiredService<TService>();

        try
        {
            spinnerService.Show();

            await Task.Delay(500); // ToDo: this line is not necessary

            TResult? serviceCallResult = await Task.Run(() => method(service));

            return serviceCallResult;
        }
        finally
        {
            spinnerService.Hide();
        }
    }

     public async Task CallAsync<TService, TAction>(Func<TService, Action> method)
        where TService : class
    {
        var service = this.services.GetRequiredService<TService>();

        try
        {
            spinnerService.Show();

            await Task.Delay(500); // ToDo: this line is not necessary

            await Task.Run(() => method(service).Invoke());
        }
        finally
        {
            spinnerService.Hide();
        }
    }
}

How to use it?

@page "/temp"

@inject ServiceCaller serviceCaller;

<h3>Temp Page</h3>

<MudButton OnClick="CallMethodReturnsString">CallMethodReturnsString</MudButton>

<MudButton OnClick="CallVoidMethodAsync">CallVoidMethodAsync</MudButton>

<MudButton OnClick="CallTaskMethodAsync">CallTaskMethodAsync</MudButton>

<MudButton OnClick="CallMany">CallMany</MudButton>


@if (!string.IsNullOrEmpty(tempMessage)){
    @tempMessage
}

@code{
    string tempMessage = string.Empty;

    // call method returns string
    private async Task CallMethodReturnsString()
    {
        await serviceCaller.CallAsync<ITempService, string>(async x => this.tempMessage = await x.RetrieveStringAsync());
    }

    // call void method
    private async Task CallVoidMethodAsync()
    {
        await serviceCaller.CallAsync<ITempService, Task>(x => () => x.MyVoidMethod());
    }

    // call task method
    private async Task CallTaskMethodAsync()
    {
        await serviceCaller.CallAsync<ITempService, Task>(x => () => x.TaskMethod());
    }

    // call many methods
    private async Task CallMany()
    {
        await serviceCaller.CallAsync<ITempService, Action>(x => async () =>
        {
            this.tempMessage = await x.RetrieveStringAsync();
            x.MyVoidMethod();
            x.TaskMethod();
        });
    }
}

Answer 5

Don't do the same mistake as I did by testing wait spinner using Thread.Sleep(n).

protected override async Task OnInitializedAsync()
{
    // Thread.Sleep(3000); // By suspending current thread the browser will freeze.
    await Task.Delay(3000); // This is your friend as dani herrera pointed out. 
                      // It creates a new task that completes 
                      // after a specified number of milliseconds.

    forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
}

Answer 6

use InvokeAsync(StateHasChanged), hopefully it will work.

protected async void Submit()
    {
        //Show Sending...
        cursorCSS = "";
        this.StateHasChanged();
        response = Service.Post(userModel);
        if (response.Errors.Any())
        {
            errorCss = "errorOn";
        }
        //turn sending off
        cursorCSS = "cursorSpinOff";
        await InvokeAsync(StateHasChanged);
    }

Answer 7

Blazor Serverside - I needed to call StateHasChanged() to force the frontend to update so the spinner would show before the code moves onto the ajax call.

/* Show spinner */
carForm.ShowSpinner = true;

/* Force update of front end */
StateHasChanged();

/* Start long running API/Db call */
await _carRepository.Update(item);

Answer 8

Easy to use at net7:

• create model SpinnerModel.cs

   Class SpinnerModel
      Public bool IsShow {get set}
      // add two actions to set property to true and false
  

• create razor component Spinner.razor

  • add some block with information about waiting
  • add created model as [parameter] to block @code
  • wrap this markup into @if-statement to check property of model

At your some view, add and init field of spinner-model, add the component of spinner to markup and bind field as model parameter at spinner-component.

And them you can set property of field to true and false (or invoke added actions to change binded property) at handlers (for example, at button-click handlers before and after async operation)

It does not working with "oninitialize", but works very well at another custom handlers.

And you can not use some strange code (for example, wraping async operations to "Task.Run")

P.s. sorry, i wrote it via mobile