diff --git a/.changeset/fix-infinite-pagination.md b/.changeset/fix-infinite-pagination.md new file mode 100644 index 0000000..a243360 --- /dev/null +++ b/.changeset/fix-infinite-pagination.md @@ -0,0 +1,5 @@ +--- +"@emdash-cms/admin": patch +--- + +Fix content list for large collections by implementing infinite scroll pagination diff --git a/packages/admin/src/router.tsx b/packages/admin/src/router.tsx index bf82584..941c78f 100644 --- a/packages/admin/src/router.tsx +++ b/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 ( void fetchNextPage()} trashedCount={trashedData?.items?.length || 0} onDelete={(id) => deleteMutation.mutate(id)} onRestore={(id) => restoreMutation.mutate(id)}