Blazor API 呼び出し中に読み込みインジケーターを効果的に表示するにはどうすればよいですか?

Blazor で API 呼び出し中に待機カーソルまたはスピナーを表示する方法

問題:
長いBlazor アプリで API 呼び出しを実行するには、待機カーソルや読み込みなどの視覚的なフィードバックをユーザーに提供する方法が必要ですスピナー。ただし、CSS を使用してこれらの状態を手動で切り替えると、ページがすぐに更新されない可能性があります。

解決策 1: Task.Delay(1) を使用する

• 非同期を作成する長時間実行オペレーションを実行するにはメソッドを使用します。
• async メソッド内で、await を使用します。 Task.Delay(1) または await Task.Yield() を使用して変更をフラッシュします。

private async Task AsyncLongFunc()
{
    spinning = true;
    await Task.Delay(1); // flush changes
    LongFunc(); // non-async code
    currentCount++;
    spinning = false;
    await Task.Delay(1); // flush changes again
}

解決策 2: Task.Run() を使用する (WebAssembly 用ではありません)

• 長時間実行される操作をTask.
• 別のスレッドでタスクを実行するには、await Task.Run() を使用します。

async Task AsyncLongOperation()
{
    spinning = true;
    await Task.Run(() => LongOperation());
    currentCount++;
    spinning = false;
}

サーバー側の事前レンダリングに関する考慮事項:

• スピナーは事前にレンダリングされた Blazor サーバーには表示されませんapps.
• スピナーを表示するには、OnAfterRenderAsync ライフサイクル メソッドで長い操作を実行します。

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

以上がBlazor API 呼び出し中に読み込みインジケーターを効果的に表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。