Prevent blank screen on grid-view render

- Add loading prop to before rendering to check for itemCount

src/renderer/components/virtual-grid/virtual-infinite-grid.tsx

@@ -21,6 +21,7 @@ interface VirtualGridProps extends Omit<FixedSizeListProps, 'children' | 'itemSi
   itemGap: number;
   itemSize: number;
   itemType: LibraryItem;
+  loading?: boolean;
   minimumBatchSize?: number;
   route?: CardRoute;
   setItemData: (data: any[]) => void;
@@ -50,6 +51,7 @@ export const VirtualInfiniteGrid = forwardRef(
       handlePlayQueueAdd,
       minimumBatchSize,
       fetchFn,
+      loading,
       initialScrollOffset,
       height,
       width,
@@ -126,7 +128,10 @@ export const VirtualInfiniteGrid = forwardRef(
       },
     }));
 
+    if (loading) return null;
+
     return (
+      <>
         <InfiniteLoader
           ref={loader}
           isItemLoaded={(index) => isItemLoaded(index)}
@@ -161,6 +166,7 @@ export const VirtualInfiniteGrid = forwardRef(
             />
           )}
         </InfiniteLoader>
+      </>
     );
   },
 );

src/renderer/features/albums/components/album-list-content.tsx

@@ -312,6 +312,7 @@ export const AlbumListContent = ({ gridRef, tableRef }: AlbumListContentProps) =
         {page.display === ListDisplayType.CARD || page.display === ListDisplayType.POSTER ? (
           <AutoSizer>
             {({ height, width }) => (
+              <>
                 <VirtualInfiniteGrid
                   key={`album-list-${server?.id}-${page.display}`}
                   ref={gridRef}
@@ -326,6 +327,7 @@ export const AlbumListContent = ({ gridRef, tableRef }: AlbumListContentProps) =
                   itemGap={20}
                   itemSize={150 + page.grid?.size}
                   itemType={LibraryItem.ALBUM}
+                  loading={checkAlbumList.isLoading}
                   minimumBatchSize={40}
                   route={{
                     route: AppRoute.LIBRARY_ALBUMS_DETAIL,
@@ -335,6 +337,7 @@ export const AlbumListContent = ({ gridRef, tableRef }: AlbumListContentProps) =
                   width={width}
                   onScroll={handleGridScroll}
                 />
+              </>
             )}
           </AutoSizer>
         ) : (

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

@@ -306,6 +306,7 @@ export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListCon
                 itemGap={20}
                 itemSize={150 + page.grid?.size}
                 itemType={LibraryItem.ALBUM_ARTIST}
+                loading={checkAlbumArtistList.isLoading}
                 minimumBatchSize={40}
                 route={{
                   route: AppRoute.LIBRARY_ALBUMARTISTS_DETAIL,