From f8a3b4af343b3c440b46986e7142cdeec7d9d051 Mon Sep 17 00:00:00 2001 From: 49 Date: Tue, 4 Nov 2025 10:15:27 +0800 Subject: [PATCH] fix: improve infinite scroll observer responsiveness (#27546) Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- web/app/components/apps/list.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/web/app/components/apps/list.tsx b/web/app/components/apps/list.tsx index 4ee9a6d6d5..5bafca287d 100644 --- a/web/app/components/apps/list.tsx +++ b/web/app/components/apps/list.tsx @@ -144,15 +144,23 @@ const List = () => { return } - if (anchorRef.current) { + if (anchorRef.current && containerRef.current) { + // Calculate dynamic rootMargin: clamps to 100-200px range, using 20% of container height as the base value for better responsiveness + const containerHeight = containerRef.current.clientHeight + const dynamicMargin = Math.max(100, Math.min(containerHeight * 0.2, 200)) // Clamps to 100-200px range, using 20% of container height as the base value + observer = new IntersectionObserver((entries) => { if (entries[0].isIntersecting && !isLoading && !error && hasMore) setSize((size: number) => size + 1) - }, { rootMargin: '100px' }) + }, { + root: containerRef.current, + rootMargin: `${dynamicMargin}px`, + threshold: 0.1, // Trigger when 10% of the anchor element is visible + }) observer.observe(anchorRef.current) } return () => observer?.disconnect() - }, [isLoading, setSize, anchorRef, mutate, data, error]) + }, [isLoading, setSize, data, error]) const { run: handleSearch } = useDebounceFn(() => { setSearchKeywords(keywords)