Blazor で長時間実行される API 呼び出し中にスピナーを表示するにはどうすればよいですか?

Blazor での API 呼び出し中に待機またはスピナーを表示する

Blazor では、待機カーソルやスピナー画像などの視覚的な手がかりを使用して、長時間実行される API 呼び出し中にユーザーにフィードバックを表示できます。

問題:

Blazor アプリケーションで、次のことを試みました。 CSS を使用して、API 呼び出し中に回転カーソルを表示します。ただし、呼び出しが完了するまでページのコンテンツは更新されませんでした。

解決策:

オプション 1: Task.Delay(1) を使用する

• 非同期メソッドを作成します。
• await を使用します。 Task.Delay(1) または await Task.Yield(); API 呼び出しが完了する前に UI を強制的に更新します。

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    
}

オプション 2: Task.Run() を使用する (WebAssembly 用ではありません)

• LongOperation() メソッドが非同期でない場合は、それをタスクに囲み、次を使用して待機します。 Task.Run().

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

Effect

サーバー側の事前レンダリングに関するメモ:

Blazor サーバー アプリでは、プリレンダリングのためスピナーは表示されません。これを表示するには、OnAfterRender で長い操作を実行します。

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

その他の例と情報については、BlazorPro.Spinkit などのオープン ソース プロジェクトを参照してください。

以上がBlazor で長時間実行される API 呼び出し中にスピナーを表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。