zent/src/loading/hooks/useDelayed.ts

一套前端设计语言和基于React的实现

import { useState, useEffect } from 'react';

export interface ILoadingUseDelayedParams {
  loading: boolean;
  delay: number;
}

export default function useDelayed({
  loading,
  delay,
}: ILoadingUseDelayedParams) {
  const shouldDelay = !!(delay && delay > 0);
  const [delayed, setDelayed] = useState(shouldDelay);

  useEffect(() => {
    if (loading && shouldDelay) {
      setDelayed(true);
      const timerId = setTimeout(() => setDelayed(false), delay);
      return () => clearTimeout(timerId);
    }

    return setDelayed(shouldDelay);
  }, [loading, delay, shouldDelay]);

  return delayed;
}