적재된 전단지를 막기 위해 특제 갈고리를 만들었습니다!

import { useEffect, useState } from "react";

export const useLoadingWithBuffer = (
  isDefaultLoading: boolean,
  buffer: number = 500
) => {
  const [isLoading, setIsLoading] = useState(isDefaultLoading);
  const [isLocking, setIsLocking] = useState(false);

  useEffect(() => {
    // 「ローディング中」に変化したとき
    if (isDefaultLoading) {
      // 「ローディング中」に更新
      setIsLoading(isDefaultLoading);

      // 一定時間ローディング状態をロックする
      setIsLocking(true);
      setTimeout(() => setIsLocking(false), buffer);
    }

    // 「非ローディング中」に変化し、ロックされていないとき
    if (!isDefaultLoading && !isLocking) {
      // 「非ローディング中」に更新
      setIsLoading(isDefaultLoading);
    }
  }, [isDefaultLoading, isLocking]);

  return isLoading;
};

const isLoading = useLoadingWithBuffer(isDefaultLoading);