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

Blazor での API 呼び出し中に読み込みインジケーターを表示する

Blazor で時間がかかる可能性のある API 呼び出しを行う場合は、フィードバックを提供することが重要です。ユーザー。一般的に使用されるインジケーターは、待機カーソルまたはスピナー イメージです。 Blazor でこれを実現するには、いくつかのオプションが利用可能です。

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

この方法には、非同期タスクの使用と await Task の呼び出しが含まれます。 .Delay(1);または Task.Yield(); を待ちます。各 UI 更新後。これにより、変更がフラッシュされ、スピナーが表示されるようになります。

オプション 2: Task.Run() を使用する (WebAssembly には非対応)

このオプションには、長いTask.Run(()=> LongOperation()); を使用してタスク内で操作を実行します。これにより、操作の実行中にメイン スレッドがブロックされるのを防ぎます。

サーバー側の事前レンダリングに対するスピナーの影響

Blazor サーバー アプリでは、ページが事前レンダリングされます。の場合、OnAfterRenderAsync で長い操作が実行されない限り、スピナーは表示されません。 OnInitializedAsync の代わりにこのライフサイクル メソッドを使用すると、サーバー側のレンダリングが遅れなくなります。

サンプル コード

// Don't do this
//protected override async Task OnInitializedAsync()
//{
//    await LongOperation();
//}

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

追加リソース

• [BlazorPro.Spinkit](https://github.com/EdCharbeneau/BlazorPro.Spinkit) は、スピナーを作成するためのサンプル コードを含むライブラリを提供します。

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