[備忘録]APIのレスポンスなどの非同期処理が早過ぎる場合でも、ローディングを1秒間は表示する方法

APIレスポンスが早すぎてローディングが一瞬しか出ない問題

APIのレスポンスに限らず、Promiseの処理が一瞬で終わってしまい、ローディングがほとんど表示されないため、正常に処理が終了したのかわかりにくい場合があると思う。
その際に、いい感じに書く方法をメモっておく。

ReactNativeのRefreshControlの例

重要なのは、const promise = refreshFunc()とsetTimeoutの部分。
ここで、refreshFunc()は非同期処理である。
非同期処理のPromiseオブジェクトを変数に入れておくことで、非同期処理の実行は先に行うが、
どんなに早く非同期処理が終了しても、setTimeoutの時間が経過した後でしか結果をチェックしないようにする。

export const ScrollViewWithRefresh = ({refreshFunc, children, ...props}) => {
  const [isRefreshing, setIsRefreshing] = useState(false)

  return (
    <ScrollView
      refreshControl={
        <RefreshControl
          refreshing={isRefreshing}
          colors={[primary]}
          tintColor={primary}
          onRefresh={async () => {
            setIsRefreshing(true)
            const promise = refreshFunc()
            setTimeout(() => {
              promise.then(() => setIsRefreshing(false))
            }, 1000) // 最短でも1秒間はローディングを表示する
          }}
        />
      }
      {...props}
    >
      {children}
    </ScrollView>
  )
}

ググる力がなさすぎて、いい方法が見つからなかったので、どうにか自分で書いてみた。
もっといい方法があれば教えて下さい。。。