React×TypeScript 処理のwaitを入れる

こんな時ありませんか？

バックエンドAPI通信中に画面ローディングを実装したいな・・・・
例えば、こんな処理があったとします。バックエンドへ何回もAPIせずにローディングコンポーネントを作りたい！

処理１　　→　　バックエンドAPI処理　　→　　処理２

同期的に処理し、処理に待ちを発生させる

上記の例をもとに処理を書くとこんな感じです。

XXXX.tsx

//ローディングを表示・非表示にするstate
const [isLoading, setIsLoading] = useState<boolean>();

//バックエンドAPIを実行するためのボタンをクリック
const onClick = async () => {
    処理１
    setIsLoading(true);
    // await バックエンドAPI処理();
    // 上記の代わりに以下を入れる3000は３秒
    await new Promise((resolve) => setTimeout(resolve, 3000));
    setIsLoading(false);
    処理２
};

最後に

ちょっとした役立つ情報を今後も発信していこうと思います！