34 lines
1.0 KiB
TypeScript
34 lines
1.0 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { useNavigation } from 'react-router';
|
|
|
|
const DEFAULT_DEBOUNCE_DELAY = 100; // ms
|
|
|
|
/**
|
|
* Tracks whether a route transition is in progress, even if data is cached or rendering takes time.
|
|
* Adds an optional debounce to avoid flashing the loader.
|
|
*
|
|
* @param delay Optional debounce delay in milliseconds before showing the loader.
|
|
* @returns `true` if a transition is in progress (after debounce), `false` otherwise.
|
|
*/
|
|
export function useTransitionTracker(delay: number = DEFAULT_DEBOUNCE_DELAY): boolean {
|
|
const navigation = useNavigation();
|
|
const [showPending, setShowPending] = useState<boolean>(false);
|
|
|
|
useEffect(() => {
|
|
let timeout: ReturnType<typeof setTimeout> | null = null;
|
|
|
|
if (navigation.location) {
|
|
timeout = setTimeout(() => setShowPending(true), delay);
|
|
}
|
|
|
|
return () => {
|
|
if (timeout) {
|
|
clearTimeout(timeout);
|
|
}
|
|
setShowPending(false);
|
|
};
|
|
}, [navigation.location, delay]);
|
|
|
|
return showPending;
|
|
}
|