Skip to content

Commit

Permalink
remove delahy for prefetching
Browse files Browse the repository at this point in the history
  • Loading branch information
RhysSullivan committed Oct 23, 2024
1 parent 9dc47b4 commit 6fe5511
Showing 1 changed file with 7 additions and 23 deletions.
30 changes: 7 additions & 23 deletions src/components/ui/link.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,6 @@ type PrefetchImage = {
loading: string;
};

function sleep(ms: number) {
return new Promise((resolve) => setTimeout(resolve, ms));
}

async function prefetchImages(href: string) {
if (!href.startsWith("/") || href.startsWith("/order") || href === "/") {
return [];
Expand All @@ -39,7 +35,6 @@ export const Link: typeof NextLink = (({ children, ...props }) => {
const [preloading, setPreloading] = useState<(() => void)[]>([]);
const linkRef = useRef<HTMLAnchorElement>(null);
const router = useRouter();
let prefetchTimeout: NodeJS.Timeout | null = null; // Track the timeout ID

useEffect(() => {
if (props.prefetch === false) {
Expand All @@ -53,20 +48,12 @@ export const Link: typeof NextLink = (({ children, ...props }) => {
(entries) => {
const entry = entries[0];
if (entry.isIntersecting) {
// Set a timeout to trigger prefetch after 1 second
prefetchTimeout = setTimeout(async () => {
router.prefetch(String(props.href));
await sleep(0); // We want the doc prefetches to happen first.
void prefetchImages(String(props.href)).then((images) => {
setImages(images);
}, console.error);
// Stop observing once images are prefetched
observer.unobserve(entry.target);
}, 300); // 300ms delay
} else if (prefetchTimeout) {
// If the element leaves the viewport before 1 second, cancel the prefetch
clearTimeout(prefetchTimeout);
prefetchTimeout = null;
router.prefetch(String(props.href));
void prefetchImages(String(props.href)).then((images) => {
setImages(images);
}, console.error);
// Stop observing once images are prefetched
observer.unobserve(entry.target);
}
},
{ rootMargin: "0px", threshold: 0.1 }, // Trigger when at least 10% is visible
Expand All @@ -76,11 +63,8 @@ export const Link: typeof NextLink = (({ children, ...props }) => {

return () => {
observer.disconnect(); // Cleanup the observer when the component unmounts
if (prefetchTimeout) {
clearTimeout(prefetchTimeout); // Clear any pending timeouts when component unmounts
}
};
}, [props.href, props.prefetch]);
}, [props.href, props.prefetch, router]);

return (
<NextLink
Expand Down

0 comments on commit 6fe5511

Please sign in to comment.