fix(admin): use infinite scroll for content list to support large dat… (#135)

* fix(admin): use infinite scroll for content list to support large datasets

* chore: apply copilot review suggestions and add changeset

.changeset/fix-infinite-pagination.md

@@ -0,0 +1,5 @@
+---
+"@emdash-cms/admin": patch
+---
+
+Fix content list for large collections by implementing infinite scroll pagination

packages/admin/src/router.tsx

@@ -235,9 +235,24 @@ function ContentListPage() {
 	// Default to defaultLocale when i18n is enabled and no locale specified
 	const activeLocale = i18n ? (localeParam ?? i18n.defaultLocale) : undefined;
 
-	const { data, isLoading, error } = useQuery({
+	const {
+		data,
+		fetchNextPage,
+		hasNextPage,
+		isFetchingNextPage,
+		isLoading,
+		error,
+	} = useInfiniteQuery({
 		queryKey: ["content", collection, { locale: activeLocale }],
-		queryFn: () => fetchContentList(collection, { locale: activeLocale }),
+		queryFn: ({ pageParam }) =>
+			fetchContentList(collection, {
+				locale: activeLocale,
+				cursor: pageParam as string | undefined,
+				limit: 100,
+			}),
+		initialPageParam: undefined as string | undefined,
+		getNextPageParam: (lastPage) => lastPage.nextCursor,
+		enabled: !!manifest,
 	});
 
 	// Fetch trashed items
@@ -327,14 +342,20 @@ function ContentListPage() {
 		});
 	};
 
+	const items = React.useMemo(() => {
+		return data?.pages.flatMap((page) => page.items) || [];
+	}, [data]);
+
 	return (
 		<ContentList
 			collection={collection}
 			collectionLabel={collectionConfig.label}
-			items={data?.items || []}
+			items={items}
 			trashedItems={trashedData?.items || []}
-			isLoading={isLoading}
+			isLoading={isLoading || isFetchingNextPage}
 			isTrashedLoading={isTrashedLoading}
+			hasMore={!!hasNextPage}
+			onLoadMore={() => void fetchNextPage()}
 			trashedCount={trashedData?.items?.length || 0}
 			onDelete={(id) => deleteMutation.mutate(id)}
 			onRestore={(id) => restoreMutation.mutate(id)}