Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | 1x 1x 10x 10x 10x 10x 10x 10x 10x 10x 6x 6x 1x 1x 6x 2x 6x 10x 10x 10x | import { useEffect, useState } from 'react';
export type ScrollHint = {
queryKey: string;
show: boolean;
};
interface UseScrollHintOptions {
queryKey: string;
hasNextPage: boolean;
}
/**
* Latch: once pagination is detected for a query, keep the banner visible even
* after all pages are loaded. Resets when the query changes so the banner
* re-evaluates (and reappears) for the new query.
*/
export const useScrollHint = ({
queryKey,
hasNextPage,
}: UseScrollHintOptions): ScrollHint => {
const [scrollHint, setScrollHint] = useState<ScrollHint>({
queryKey,
show: false,
});
useEffect(() => {
setScrollHint((prev) => {
if (prev.queryKey !== queryKey) {
return { queryKey, show: !!hasNextPage };
}
if (hasNextPage && !prev.show) return { ...prev, show: true };
return prev;
});
}, [queryKey, hasNextPage]);
return scrollHint;
};
|