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
This commit is contained in:
Foysal Zihak
2026-04-04 14:02:57 +06:00
committed by GitHub
parent e9a6f7ac3c
commit 018be7f1c3
2 changed files with 30 additions and 4 deletions

View File

@@ -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)}