Blazor .NET Show loading spinner on UI while doing a heavy query in background

I have following code where i fetch results from SQL server. These are razor pages, blazor framework .Net

<button @onclick="Filter">Filter</button>@{async Task Filter() {    await FetchFromDb();}

This query runs for 18 seconds. So i want to show loading spinner. In blazor, you can use a predefined div with spinner class to do this.

<div class="spinner"> </div>

I want to use this div like following

@(IsLoading) {<div class="spinner"></div>} else {show results from query}

For which i need to change the Filter function as follows

async Task Filter() {    IsLoading = true;    await FetchFromDb();    IsLoading = false;}

But I figured, that the whole process of changing IsLoading=true and Isloading=false is done in one go and i don't see a spinner.

Is there a way to change IsLoading=true, while Filter function is getting results from Db in await FetchFromDb();?

@(IsLoading) {<div class="spinner"></div>} else {show results from query}async Task Filter() {    IsLoading = true;    await FetchFromDb();    IsLoading = false;}

But this doesn't work. IsLoading doesn't get updated on changing IsLoading=True.