From a76616b342bd103c33f9bc8d9daaa0190362a51b Mon Sep 17 00:00:00 2001 From: Frank Stellmacher Date: Tue, 21 Apr 2026 21:37:57 +0200 Subject: [PATCH] perf(albums): bump infinite-scroll prefetch margin from 200px to 1500px (#247) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The IntersectionObserver sentinel triggered the next page only when it came within 200px of the viewport — by the time the user had scrolled that far, they were already at the very edge waiting for the request. Bumping rootMargin to 1500px (~1.5 screens at typical heights) prefetches ahead of the scroll instead of behind it, so the next batch of albums is visibly already there when the user reaches them. Co-authored-by: Psychotoxical Co-authored-by: Claude Opus 4.7 (1M context) --- src/pages/Albums.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/Albums.tsx b/src/pages/Albums.tsx index 0b0684e2..c5b5bb33 100644 --- a/src/pages/Albums.tsx +++ b/src/pages/Albums.tsx @@ -186,7 +186,9 @@ export default function Albums() { useEffect(() => { const observer = new IntersectionObserver( entries => { if (entries[0].isIntersecting) loadMore(); }, - { rootMargin: '200px' } + // Prefetch ~1.5 screens ahead so the user never visibly waits at the + // bottom of the grid. 200px caught the user at the very edge. + { rootMargin: '1500px' } ); if (observerTarget.current) observer.observe(observerTarget.current); return () => observer.disconnect();