mirror of https://github.com/usememos/memos
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
24 lines
676 B
TypeScript
24 lines
676 B
TypeScript
import { useEffect, useState } from "react";
|
|
|
|
/**
|
|
* Returns a flag that turns true only after `active` has stayed true for `delay` ms,
|
|
* and turns false immediately once `active` becomes false.
|
|
*
|
|
* Useful for delaying loading indicators (e.g. skeletons) so they don't flash on fast operations.
|
|
*/
|
|
export const useDelayedFlag = (active: boolean, delay: number): boolean => {
|
|
const [delayed, setDelayed] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!active) {
|
|
setDelayed(false);
|
|
return;
|
|
}
|
|
|
|
const timeout = window.setTimeout(() => setDelayed(true), delay);
|
|
return () => window.clearTimeout(timeout);
|
|
}, [active, delay]);
|
|
|
|
return delayed;
|
|
};
|