IgbGrid – データ読み込み中にインジケータを表示したい

IgbGrid でのデータ読み込みインジケータの表示方法について解説します。

IgbGrid の設定

IgbGrid には、データの読み込み状態を管理するための IsLoading プロパティがあります。
このプロパティを利用することで、データが読み込まれていない間は自動的に読み込み中のインジケータが表示されるように設定できます。

<IgbGrid Data="_currentData"         
         IsLoading="_isLoading"
         .... >
     ....
</IgbGrid>

インジケータの表示

本記事ではボタンクリックによりデータソースを入れ替え、入れ替わりの間にインジケータを表示する方法としてご紹介いたします。
ボタンのクリックイベントでデータソースを切り替える処理を実装し、切り替わりの間インジケータを表示します。この際、IsLoading を true に設定し、データの読み込みが完了したら false に戻します。
※大量のデータ入れ替えを想定して、処理に Delay を入れています

private async Task OnClickSwitchData()
{
    var newData = _currentData == _peopleEN ? _peopleJP : _peopleEN;
    _currentData = new();
    _isLoading = true;
    await Task.Delay(1000);
    _currentData = newData;
    _isLoading = false;
}

ボタンクリックでデータソースを入れ替える

最後にデータソースを切り替えるボタンを配置します。

<IgbButton @onclick="OnClickSwitchData">データソースの切り替え</IgbButton>

実行結果

以上の設定により、ボタンクリックでデータソースを切り替える際に、読み込み中インジケータが表示され、データの読み込みが完了すると新しいデータが表示されます。