Blazor StateHasChanged does not work correctly

Question

@if (_loading)
{
    ....
}
else
{
    ....
}
....
@code 
{
 private bool _loading
...
private void Search()
{
_loading = false;
StateHasChanged();
Mails.Clear();
Licenses.Clear();
Callings.Clear();
Supports.Clear();
Leads.Clear();
search();
_loading = true;
StateHasChanged();
}

The DOM does not change at runtime. Only if you change the value of _loading twice, but if you change it only once, it works. However, I definitely need to do this twice. So I make a progressbar. How fix it?

Answer 1

StateHasChanged() does not perform or force a Render, it only requests one.
That request can only be honored when the main thread is released for a bit, either in an await or when the eventhandling is finished.

When you don't have any async work you can simulate it with Task.Delay(1). But you do have to await so your method must return Task and must be awaited itself.

private async Task Search()  // call it from an Async method
{
  _loading = false;
  //StateHasChanged();  // not needed
  await Task.Delay(1);  // here the UI gets updated
  Mails.Clear();
  Licenses.Clear();
  Callings.Clear();
  Supports.Clear();
  Leads.Clear();
  search();            // tricky naming
  _loading = true;
  //StateHasChanged(); // not needed
}