diff --git a/src/photo/InfinitePhotoScroll.tsx b/src/photo/InfinitePhotoScroll.tsx index 98933cf6..2fd71b87 100644 --- a/src/photo/InfinitePhotoScroll.tsx +++ b/src/photo/InfinitePhotoScroll.tsx @@ -3,7 +3,12 @@ import { preload } from 'swr'; import useSwrInfinite from 'swr/infinite'; import PhotosLarge from '@/photo/PhotosLarge'; -import { useCallback, useEffect, useMemo, useRef } from 'react'; +import { + useCallback, + useEffect, + useMemo, + useRef, +} from 'react'; import SiteGrid from '@/components/SiteGrid'; import Spinner from '@/components/Spinner'; import { getPhotosAction } from '@/photo/actions'; @@ -74,17 +79,9 @@ export default function InfinitePhotoScroll({ } }, [prefetch, isFinished, key, size, fetcher]); - const advance = useCallback((advanceWhileStillVisible?: boolean) => { + const advance = useCallback(() => { if (!isFinished && !isLoadingOrValidating) { setSize(size => size + 1); - if (advanceWhileStillVisible) { - setTimeout(() => { - const rect = buttonContainerRef.current?.getBoundingClientRect(); - if (rect && rect.top <= window.innerHeight) { - advance(true); - } - }, 1000); - } } }, [isFinished, setSize, isLoadingOrValidating]); @@ -93,7 +90,7 @@ export default function InfinitePhotoScroll({ if (buttonContainerRef.current) { const observer = new IntersectionObserver(e => { if (triggerOnView && e[0].isIntersecting) { - advance(true); + advance(); } }, { root: null, @@ -104,6 +101,19 @@ export default function InfinitePhotoScroll({ } }, [triggerOnView, advance]); + // Poll for button getting stuck + useEffect(() => { + if (triggerOnView && !isFinished && !isLoadingOrValidating) { + const interval = setInterval(() => { + const rect = buttonContainerRef.current?.getBoundingClientRect(); + if (rect && rect.top <= window.innerHeight) { + advance(); + } + }, 1000); + return () => clearInterval(interval); + } + }, [advance, isFinished, isLoadingOrValidating, triggerOnView]); + const photos = useMemo(() => (data ?? [])?.flat(), [data]); const revalidatePhoto: RevalidatePhoto = useCallback((