Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import {useEffect, useState} from 'react';
/**
* A specialized useState hook for doing isLoading messages. This delays
* setting flag as true for `delayTimeInMs`. This is to avoid unnecessary loading indicators.
*
* @param {boolean} initialState initial flag, true if loading false otherwise.
* @param {number} [delayTimeInMs=400] milliseconds to delay before setting flag to true
* @returns {[boolean, React.Dispatch<React.SetStateAction<boolean>>]} usual useState return
*/
export default function useIsLoading(
initialState: boolean,
delayTimeInMs: number = 400,
): [boolean, React.Dispatch<React.SetStateAction<boolean>>] {
const [isLoading, setIsLoading] = useState(initialState);
const [isLoadingInternal, setIsLoadingInternal] = useState(initialState);
useEffect(() => {
if (!isLoadingInternal) {
setIsLoading(isLoadingInternal);
return;
}
const timer = setTimeout(
() => setIsLoading(isLoadingInternal),
delayTimeInMs,
);
return () => {
clearTimeout(timer);
};
}, [isLoadingInternal]);
return [isLoading, setIsLoadingInternal];
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment