41 lines
877 B
TypeScript
41 lines
877 B
TypeScript
import { useEffect } from 'react';
|
|
import { useStateRef } from './use-state-ref.ts';
|
|
export interface UseDebouncedSkeletonProps {
|
|
minSkeletonDuration?: number;
|
|
loading?: boolean;
|
|
}
|
|
|
|
export function useDebouncedSkeleton({
|
|
minSkeletonDuration = 100,
|
|
loading,
|
|
}: UseDebouncedSkeletonProps) {
|
|
const [showSkeleton, setShowSkeleton, showSkeletonRef] = useStateRef(loading);
|
|
|
|
useEffect(() => {
|
|
if (loading && !showSkeleton) {
|
|
setShowSkeleton(true);
|
|
}
|
|
if (!loading && showSkeleton) {
|
|
const timeout = setTimeout(() => {
|
|
if (showSkeletonRef.current) {
|
|
setShowSkeleton(false);
|
|
}
|
|
}, minSkeletonDuration);
|
|
|
|
return () => {
|
|
clearTimeout(timeout);
|
|
};
|
|
}
|
|
}, [
|
|
loading,
|
|
showSkeleton,
|
|
setShowSkeleton,
|
|
minSkeletonDuration,
|
|
showSkeletonRef,
|
|
]);
|
|
|
|
return {
|
|
showSkeleton,
|
|
};
|
|
}
|