InfiniteScroll

InfiniteScroll
├── InfiniteScrollEmpty
├── InfiniteScrollContent
├── InfiniteScrollLoading
├── InfiniteScrollError
├── InfiniteScrollEnd
└── InfiniteScrollSentinel

import {
	InfiniteScroll,
	InfiniteScrollContent,
	InfiniteScrollEnd,
	InfiniteScrollError,
	InfiniteScrollLoading,
	InfiniteScrollSentinel,
} from "@giddaa-housing/ui/infinite-scroll";
import { useInfiniteQuery } from "@tanstack/react-query";

const query = useInfiniteQuery({
	queryKey: ["activity"],
	queryFn: ({ pageParam }) => fetchActivityPage(pageParam),
	initialPageParam: 0,
	getNextPageParam: (lastPage) => lastPage.nextCursor,
});

const items = query.data?.pages.flatMap((page) => page.items) ?? [];

<InfiniteScroll
	isLoading={query.isLoading}
	isEmpty={items.length === 0}
	error={query.error}
	hasNextPage={query.hasNextPage}
	isFetchingNextPage={query.isFetchingNextPage}
	fetchNextPage={query.fetchNextPage}
>
	<InfiniteScrollContent>{items.map((item) => <ActivityItem key={item.id} item={item} />)}</InfiniteScrollContent>
	<InfiniteScrollLoading />
	<InfiniteScrollError />
	<InfiniteScrollEnd>All activity loaded.</InfiniteScrollEnd>
	<InfiniteScrollSentinel />
</InfiniteScroll>