Blazor Server の画面で処理中オーバーレイを表示する

.Net Core 5.0 で、Blazor Server 画面を実装中、EFCoreを使ったDB処理と、Blazor画面との連携で、DB処理の非同期化が上手くいかず、「処理中オーバーレイ」が表示されずハマった。
・StateHasChanged() 実行箇所を増やしても解消せず。
・O/Rマッパーを、EFCoreではなく、Dapperに変更しても解消せず。
・await Task.Delay(1); を実行し、スレッドを画面に強制的に一旦戻すことで解消。

実装した「処理中オーバーレイ」画面。
処理ボタンがクリックされたら、前面に回転するオブジェクトをオーバーレイで表示し、裏面の画面操作を禁止する。

オーバーレイを表示しているRazorページ。


@page "/Stock/StockName"
@inject ILogger<StockName> _Logger
@inject ProtectedSessionStorage ProtectedSessionStore
@inject ApplicationDbContext _DbContext


    @if (IsLoadingOverlay)
    {
        <div id="loading">
            <div class="w-100 d-flex justify-content-center align-items-center">
                <div class="spinner-border text-primary spinner-custom" role="status"></div>
            </div>
        </div>
    }

@page "/Stock/StockName"

@inject ILogger<StockName> _Logger

@inject ProtectedSessionStorage ProtectedSessionStore

@inject ApplicationDbContext _DbContext

@if (IsLoadingOverlay)

{

</div>

}

処理中はオーバーレイを表示し、処理が終わったらオーバーレイを非表示にしている、 Razorページのイベントハンドラ。


<button type="button" class="btn btn-min btn-primary mr-2" @onclick="Test">検索</button>

@code {

    private bool IsLoadingOverlay = false;

    private async Task Test()
    {
        try
        {
            IsLoadingOverlay = true;
            await Task.Delay(1); // これをしないと、画面にスレッドが切り替わらず、オーバーレイが表示されない。StateHasChanged()でもだめ。

            // 
            // DB処理などの重い処理
            // 

            IsLoadingOverlay = false;

        }
        catch (Exception ex)
        {
            Error.ProcessErrorSync(ex);
        }
    }

}

@code {

private bool IsLoadingOverlay = false;

private async Task Test()

{

try

{

IsLoadingOverlay = true;

await Task.Delay(1); // これをしないと、画面にスレッドが切り替わらず、オーバーレイが表示されない。StateHasChanged()でもだめ。

// DB処理などの重い処理

IsLoadingOverlay = false;

}

catch (Exception ex)

{

Error.ProcessErrorSync(ex);

}