Add initial fetch for all grid views

src/renderer/api/query-keys.ts

@@ -74,12 +74,21 @@ export const queryKeys: Record<
     albums: {
         detail: (serverId: string, query?: AlbumDetailQuery) =>
             [serverId, 'albums', 'detail', query] as const,
-        list: (serverId: string, query?: AlbumListQuery) => {
+        list: (serverId: string, query?: AlbumListQuery, artistId?: string) => {
             const { pagination, filter } = splitPaginatedQuery(query);
+
+            if (query && pagination && artistId) {
+                return [serverId, 'albums', 'list', artistId, filter, pagination] as const;
+            }
+
             if (query && pagination) {
                 return [serverId, 'albums', 'list', filter, pagination] as const;
             }
 
+            if (query && artistId) {
+                return [serverId, 'albums', 'list', artistId, filter] as const;
+            }
+
             if (query) {
                 return [serverId, 'albums', 'list', filter] as const;
             }

src/renderer/features/albums/components/album-list-grid-view.tsx

@@ -150,10 +150,12 @@ export const AlbumListGridView = ({ gridRef, itemCount }: any) => {
             ...customFilters,
         };
 
+        const queryKey = queryKeys.albums.list(server?.id || '', query, id);
+
         const queriesFromCache: [QueryKey, AlbumListResponse][] = queryClient.getQueriesData({
             exact: false,
             fetchStatus: 'idle',
-            queryKey: queryKeys.albums.list(server?.id || '', query),
+            queryKey,
             stale: false,
         });
 
@@ -162,7 +164,7 @@ export const AlbumListGridView = ({ gridRef, itemCount }: any) => {
         for (const [, data] of queriesFromCache) {
             const { items, startIndex } = data || {};
 
-            if (items && startIndex !== undefined) {
+            if (items && items.length !== 1 && startIndex !== undefined) {
                 let itemIndex = 0;
                 for (
                     let rowIndex = startIndex;
@@ -176,7 +178,7 @@ export const AlbumListGridView = ({ gridRef, itemCount }: any) => {
         }
 
         return itemData;
-    }, [customFilters, filter, queryClient, server?.id]);
+    }, [customFilters, filter, id, queryClient, server?.id]);
 
     const fetch = useCallback(
         async ({ skip, take }: { skip: number; take: number }) => {
@@ -191,7 +193,7 @@ export const AlbumListGridView = ({ gridRef, itemCount }: any) => {
                 ...customFilters,
             };
 
-            const queryKey = queryKeys.albums.list(server?.id || '', query);
+            const queryKey = queryKeys.albums.list(server?.id || '', query, id);
 
             const albums = await queryClient.fetchQuery(queryKey, async ({ signal }) =>
                 controller.getAlbumList({
@@ -205,7 +207,7 @@ export const AlbumListGridView = ({ gridRef, itemCount }: any) => {
 
             return albums;
         },
-        [customFilters, filter, queryClient, server],
+        [customFilters, filter, id, queryClient, server],
     );
 
     return (

src/renderer/features/albums/queries/album-list-query.ts

@@ -22,7 +22,11 @@ export const useAlbumList = (args: QueryHookArgs<AlbumListQuery>) => {
                 query,
             });
         },
-        queryKey: queryKeys.albums.list(serverId || '', query),
+        queryKey: queryKeys.albums.list(
+            serverId || '',
+            query,
+            query?.artistIds?.length === 1 ? query?.artistIds[0] : undefined,
+        ),
         ...options,
     });
 };

src/renderer/features/artists/components/album-artist-list-grid-view.tsx

@@ -52,7 +52,7 @@ export const AlbumArtistListGridView = ({ itemCount, gridRef }: AlbumArtistListG
         for (const [, data] of queriesFromCache) {
             const { items, startIndex } = data || {};
 
-            if (items && startIndex !== undefined) {
+            if (items && items.length !== 1 && startIndex !== undefined) {
                 let itemIndex = 0;
                 for (
                     let rowIndex = startIndex;

src/renderer/features/genres/components/genre-list-grid-view.tsx

@@ -1,11 +1,11 @@
-import { useQueryClient } from '@tanstack/react-query';
+import { QueryKey, useQueryClient } from '@tanstack/react-query';
 import { useCallback, useMemo } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import AutoSizer, { Size } from 'react-virtualized-auto-sizer';
 import { ListOnScrollProps } from 'react-window';
 import { api } from '/@/renderer/api';
 import { queryKeys } from '/@/renderer/api/query-keys';
-import { Album, GenreListQuery, LibraryItem } from '/@/renderer/api/types';
+import { Album, GenreListQuery, GenreListResponse, LibraryItem } from '/@/renderer/api/types';
 import { ALBUM_CARD_ROWS } from '/@/renderer/components';
 import {
     VirtualGridAutoSizerContainer,
@@ -51,6 +51,39 @@ export const GenreListGridView = ({ gridRef, itemCount }: any) => {
         [id, pageKey, setGrid, setSearchParams],
     );
 
+    const fetchInitialData = useCallback(() => {
+        const query: Omit<GenreListQuery, 'startIndex' | 'limit'> = {
+            ...filter,
+        };
+
+        const queriesFromCache: [QueryKey, GenreListResponse][] = queryClient.getQueriesData({
+            exact: false,
+            fetchStatus: 'idle',
+            queryKey: queryKeys.genres.list(server?.id || '', query),
+            stale: false,
+        });
+
+        const itemData = [];
+
+        for (const [, data] of queriesFromCache) {
+            const { items, startIndex } = data || {};
+
+            if (items && items.length !== 1 && startIndex !== undefined) {
+                let itemIndex = 0;
+                for (
+                    let rowIndex = startIndex;
+                    rowIndex < startIndex + items.length;
+                    rowIndex += 1
+                ) {
+                    itemData[rowIndex] = items[itemIndex];
+                    itemIndex += 1;
+                }
+            }
+        }
+
+        return itemData;
+    }, [filter, queryClient, server?.id]);
+
     const fetch = useCallback(
         async ({ skip, take }: { skip: number; take: number }) => {
             if (!server) {
@@ -93,6 +126,7 @@ export const GenreListGridView = ({ gridRef, itemCount }: any) => {
                         cardRows={cardRows}
                         display={display || ListDisplayType.CARD}
                         fetchFn={fetch}
+                        fetchInitialData={fetchInitialData}
                         handlePlayQueueAdd={handlePlayQueueAdd}
                         height={height}
                         initialScrollOffset={initialScrollOffset}

src/renderer/features/playlists/components/playlist-list-grid-view.tsx

@@ -1,4 +1,4 @@
-import { useQueryClient } from '@tanstack/react-query';
+import { QueryKey, useQueryClient } from '@tanstack/react-query';
 import { MutableRefObject, useCallback, useMemo } from 'react';
 import AutoSizer, { Size } from 'react-virtualized-auto-sizer';
 import { ListOnScrollProps } from 'react-window';
@@ -6,7 +6,13 @@ import { useListContext } from '../../../context/list-context';
 import { useListStoreActions } from '../../../store/list.store';
 import { controller } from '/@/renderer/api/controller';
 import { queryKeys } from '/@/renderer/api/query-keys';
-import { LibraryItem, Playlist, PlaylistListQuery, PlaylistListSort } from '/@/renderer/api/types';
+import {
+    LibraryItem,
+    Playlist,
+    PlaylistListQuery,
+    PlaylistListResponse,
+    PlaylistListSort,
+} from '/@/renderer/api/types';
 import { PLAYLIST_CARD_ROWS } from '/@/renderer/components';
 import {
     VirtualGridAutoSizerContainer,
@@ -96,6 +102,39 @@ export const PlaylistListGridView = ({ gridRef, itemCount }: PlaylistListGridVie
         [pageKey, setGrid],
     );
 
+    const fetchInitialData = useCallback(() => {
+        const query: Omit<PlaylistListQuery, 'startIndex' | 'limit'> = {
+            ...filter,
+        };
+
+        const queriesFromCache: [QueryKey, PlaylistListResponse][] = queryClient.getQueriesData({
+            exact: false,
+            fetchStatus: 'idle',
+            queryKey: queryKeys.playlists.list(server?.id || '', query),
+            stale: false,
+        });
+
+        const itemData = [];
+
+        for (const [, data] of queriesFromCache) {
+            const { items, startIndex } = data || {};
+
+            if (items && items.length !== 1 && startIndex !== undefined) {
+                let itemIndex = 0;
+                for (
+                    let rowIndex = startIndex;
+                    rowIndex < startIndex + items.length;
+                    rowIndex += 1
+                ) {
+                    itemData[rowIndex] = items[itemIndex];
+                    itemIndex += 1;
+                }
+            }
+        }
+
+        return itemData;
+    }, [filter, queryClient, server?.id]);
+
     const fetch = useCallback(
         async ({ skip, take }: { skip: number; take: number }) => {
             if (!server) {
@@ -136,6 +175,7 @@ export const PlaylistListGridView = ({ gridRef, itemCount }: PlaylistListGridVie
                         cardRows={cardRows}
                         display={display || ListDisplayType.CARD}
                         fetchFn={fetch}
+                        fetchInitialData={fetchInitialData}
                         handleFavorite={handleFavorite}
                         handlePlayQueueAdd={handlePlayQueueAdd}
                         height={height}