From afdbc436e442dd4e786ac47460ce711b93037633 Mon Sep 17 00:00:00 2001 From: Till JS Date: Sat, 18 Apr 2026 16:08:27 +0200 Subject: [PATCH] refactor(page-carousel): name the IntersectionObserver magic numbers MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Hoisted the rootMargin and threshold literals into PREMOUNT_MARGIN and INTERSECTION_THRESHOLD constants next to MAX_MOUNTED. Same behavior — the intent of the three tuning knobs is now visible at a glance and easy to adjust from one spot if the lazy-mount envelope needs tweaking. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../components/page-carousel/PageCarousel.svelte | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/apps/mana/apps/web/src/lib/components/page-carousel/PageCarousel.svelte b/apps/mana/apps/web/src/lib/components/page-carousel/PageCarousel.svelte index 9dd415e99..f3036767a 100644 --- a/apps/mana/apps/web/src/lib/components/page-carousel/PageCarousel.svelte +++ b/apps/mana/apps/web/src/lib/components/page-carousel/PageCarousel.svelte @@ -54,7 +54,7 @@ // 1-2 cards in the horizontal viewport are actually visible. // // Strategy: render a fixed-size placeholder until the wrapper enters - // the viewport (50% horizontal overshoot so the next card is ready + // the viewport (with horizontal overshoot so the next card is ready // before the user scrolls to it), then swap in the real snippet. // // LRU cache: keep the MAX_MOUNTED most-recently-intersected cards @@ -64,6 +64,12 @@ // scrolls through. The cap is set high enough to cover typical // working sets (3–6 apps) with headroom. const MAX_MOUNTED = 8; + /** Pre-mount cards this far (horizontal, each side) outside the viewport + * so the neighbour is ready when the user starts scrolling. */ + const PREMOUNT_MARGIN = '0px 50% 0px 50%'; + /** Intersection ratio at which we consider a card "visible enough" to + * mount. Kept tiny so even a sliver-visible card counts. */ + const INTERSECTION_THRESHOLD = 0.01; let mountedIds = $state>(new Set()); function markMounted(id: string) { // Set preserves insertion order → MRU sits at the back. Already-MRU @@ -112,10 +118,8 @@ }, { root: trackEl, - // Pre-mount the immediate neighbours so the next card on - // either side is ready when the user starts scrolling. - rootMargin: '0px 50% 0px 50%', - threshold: 0.01, + rootMargin: PREMOUNT_MARGIN, + threshold: INTERSECTION_THRESHOLD, } ); io = instance;