From 789512b10a0533126c2f97abfc3c343d297c8ac8 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sun, 28 Sep 2025 19:21:27 -0700
Subject: [PATCH] add initial infinite album list component

---
 .../components/album-list-infinite-grid.tsx   | 44 +++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 src/renderer/features/albums/components/album-list-infinite-grid.tsx

diff --git a/src/renderer/features/albums/components/album-list-infinite-grid.tsx b/src/renderer/features/albums/components/album-list-infinite-grid.tsx
new file mode 100644
index 000000000..3f8fb2508
--- /dev/null
+++ b/src/renderer/features/albums/components/album-list-infinite-grid.tsx
@@ -0,0 +1,44 @@
+import { UseQueryOptions, UseSuspenseQueryOptions } from '@tanstack/react-query';
+import { forwardRef } from 'react';
+
+import {
+    InfiniteListProps,
+    useItemListInfiniteLoader,
+} from '/@/renderer/components/item-list/helpers/item-list-loader';
+import { ItemGrid } from '/@/renderer/components/item-list/item-grid/item-grid';
+import { albumQueries } from '/@/renderer/features/albums/api/album-api';
+import { AlbumListQuery, AlbumListResponse, LibraryItem } from '/@/shared/types/domain-types';
+
+interface AlbumListInfiniteGridProps extends InfiniteListProps<AlbumListQuery> {}
+
+export const AlbumListInfiniteGrid = forwardRef<any, AlbumListInfiniteGridProps>(
+    ({ query, serverId }, ref) => {
+        const listCountQuery = albumQueries.listCount({
+            query: { ...query },
+            serverId: serverId,
+        }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
+
+        const listQuery = albumQueries.list({
+            query: { ...query, startIndex: 0 },
+            serverId: serverId,
+        }) as UseQueryOptions<AlbumListResponse, Error, AlbumListResponse, readonly unknown[]>;
+
+        const { data, onRangeChanged } = useItemListInfiniteLoader({
+            itemsPerPage: 100,
+            itemType: LibraryItem.ALBUM,
+            listCountQuery,
+            listQuery,
+            params: query,
+            serverId,
+        });
+
+        return (
+            <ItemGrid
+                data={data || []}
+                itemType={LibraryItem.ALBUM}
+                onRangeChanged={onRangeChanged}
+                ref={ref}
+            />
+        );
+    },
+);