Blazor loading animation for API vs. EF

Question

I have a server-side blazor app and I am using this tutorial to implement a loading animation for all API calls -- Display spinner on each API call automatically in Blazor

This works well. Every button click that goes out to call API displays a loading animation. However, when I switch the API call to a class library that uses EF to make db changes, the loading animation does not show up.

Well, I should re-phrase. The loading animation only shows up in the initial page load, but not subsequent button clicks. Here is the class library function:

    public async Task<List<LetterInfo>> ActiveLetters(int id)
    {
        _loader.Show();
        Thread.Sleep(5000);
        var letters = await _dbRO.Letters.Include(x => x.Student).Where(x => x.VolunteerId == id)
            .OrderBy(x => x.DateAdded).ToListAsync();
        _loader.Hide();
        return _mapper.Map<List<LetterInfo>>(letters);
    }

Nothing special about the function. The _loader variable is DI for the SpinnerService:

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

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

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

Here is the page:

private List<LetterInfo> _letters;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        _letters = await _vs.VolunteerService.ActiveLetters(104);
        StateHasChanged();
    }
}

private async Task ButtonClick()
{
    _letters = await _vs.VolunteerService.ActiveLetters(110);
}

As you can see, in the AfterRender lifecycle, I call the function. This animation works well. And I also have a button on the page that triggers ButtonClick(), which calls the same DB function. However, in this call, there is no loading animation displayed.

What do I need to do to make it work? Thanks!

Answer 1

I'm not sure why it works the first time but Sleep() blocks the main thread and therefore the required update rendering.

//Thread.Sleep(5000);
await Task.Delay(5000);