itlxrd/psysonic
1
0
Fork 0
mirror of https://github.com/kilyabin/psysonic.git synced 2026-07-22 14:35:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf(albums): bump infinite-scroll prefetch margin from 200px to 1500px (#247)

Browse Source 
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 <dev@psysonic.app>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Frank Stellmacher
2026-04-21 21:37:57 +02:00
committed by GitHub
parent 1ec27f9aff
commit a76616b342
1 changed files with 3 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Albums.tsx
+3 -1
View File
@@ -186,7 +186,9 @@ export default function Albums() {
useEffect(() => { useEffect(() => {
const observer = new IntersectionObserver( const observer = new IntersectionObserver(
entries => { if (entries[0].isIntersecting) loadMore(); }, 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); if (observerTarget.current) observer.observe(observerTarget.current);
return () => observer.disconnect(); return () => observer.disconnect();