diff --git a/src/pages/all-contribution-page.tsx b/src/pages/all-contribution-page.tsx index 316fbfa..46d1e5a 100644 --- a/src/pages/all-contribution-page.tsx +++ b/src/pages/all-contribution-page.tsx @@ -1,3 +1,4 @@ +import { useEffect, useRef } from 'react'; import { useInfiniteQuery } from '@tanstack/react-query'; import { getAllContributions } from '../apis/contribution'; import logo from '../assets/icons/logo.svg'; @@ -82,6 +83,7 @@ function ContributionFeedCard({ feed }: { feed: ContributionFeed }) { } export default function AllContributionPage() { + const loadMoreRef = useRef(null); const { data, isPending, @@ -102,6 +104,29 @@ export default function AllContributionPage() { lastPage.hasNext ? lastPage.nextCursor : undefined, }); + useEffect(() => { + const target = loadMoreRef.current; + + if (!target) return; + + const observer = new IntersectionObserver( + ([entry]) => { + if ( + entry?.isIntersecting && + hasNextPage && + !isFetchingNextPage + ) { + void fetchNextPage(); + } + }, + { rootMargin: '200px 0px' }, + ); + + observer.observe(target); + + return () => observer.disconnect(); + }, [fetchNextPage, hasNextPage, isFetchingNextPage]); + if (isPending) { return (
@@ -152,16 +177,13 @@ export default function AllContributionPage() {

)} - {hasNextPage && ( - - )} +
+ {isFetchingNextPage && } +
);