pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Prevent blank screen on grid-view render

Browse source 
- Add loading prop to before rendering to check for itemCount
This commit is contained in:
jeffvli 2023-01-05 11:03:24 -08:00
parent df4f05b14c
commit ad3728a55d
3 changed files with 67 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
src/renderer/components/virtual-grid/virtual-infinite-grid.tsx
View file

@ -21,6 +21,7 @@ interface VirtualGridProps extends Omit<FixedSizeListProps, 'children' | 'itemSi
itemGap: number; itemGap: number;
itemSize: number; itemSize: number;
itemType: LibraryItem; itemType: LibraryItem;
loading?: boolean;
minimumBatchSize?: number; minimumBatchSize?: number;
route?: CardRoute; route?: CardRoute;
setItemData: (data: any[]) => void; setItemData: (data: any[]) => void;
@ -50,6 +51,7 @@ export const VirtualInfiniteGrid = forwardRef(
handlePlayQueueAdd, handlePlayQueueAdd,
minimumBatchSize, minimumBatchSize,
fetchFn, fetchFn,
loading,
initialScrollOffset, initialScrollOffset,
height, height,
width, width,
@ -126,41 +128,45 @@ export const VirtualInfiniteGrid = forwardRef(
}, },
})); }));
if (loading) return null;
return ( return (
<InfiniteLoader <>
ref={loader} <InfiniteLoader
isItemLoaded={(index) => isItemLoaded(index)} ref={loader}
itemCount={itemCount || 0} isItemLoaded={(index) => isItemLoaded(index)}
loadMoreItems={debouncedLoadMoreItems} itemCount={itemCount || 0}
minimumBatchSize={minimumBatchSize} loadMoreItems={debouncedLoadMoreItems}
threshold={30} minimumBatchSize={minimumBatchSize}
> threshold={30}
{({ onItemsRendered, ref: infiniteLoaderRef }) => ( >
<VirtualGridWrapper {({ onItemsRendered, ref: infiniteLoaderRef }) => (
cardRows={cardRows} <VirtualGridWrapper
columnCount={columnCount} cardRows={cardRows}
display={display || ListDisplayType.CARD} columnCount={columnCount}
handlePlayQueueAdd={handlePlayQueueAdd} display={display || ListDisplayType.CARD}
height={height} handlePlayQueueAdd={handlePlayQueueAdd}
initialScrollOffset={initialScrollOffset} height={height}
itemCount={itemCount || 0} initialScrollOffset={initialScrollOffset}
itemData={itemData} itemCount={itemCount || 0}
itemGap={itemGap} itemData={itemData}
itemHeight={itemHeight + itemGap / 2} itemGap={itemGap}
itemType={itemType} itemHeight={itemHeight + itemGap / 2}
itemWidth={itemSize} itemType={itemType}
refInstance={(list) => { itemWidth={itemSize}
infiniteLoaderRef(list); refInstance={(list) => {
listRef.current = list; infiniteLoaderRef(list);
}} listRef.current = list;
route={route} }}
rowCount={rowCount} route={route}
width={width} rowCount={rowCount}
onItemsRendered={onItemsRendered} width={width}
onScroll={onScroll} onItemsRendered={onItemsRendered}
/> onScroll={onScroll}
)} />
</InfiniteLoader> )}
</InfiniteLoader>
</>
); );
}, },
); );

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

@ -312,29 +312,32 @@ export const AlbumListContent = ({ gridRef, tableRef }: AlbumListContentProps) =
{page.display === ListDisplayType.CARD || page.display === ListDisplayType.POSTER ? ( {page.display === ListDisplayType.CARD || page.display === ListDisplayType.POSTER ? (
<AutoSizer> <AutoSizer>
{({ height, width }) => ( {({ height, width }) => (
<VirtualInfiniteGrid <>
key={`album-list-${server?.id}-${page.display}`} <VirtualInfiniteGrid
ref={gridRef} key={`album-list-${server?.id}-${page.display}`}
cardRows={cardRows} ref={gridRef}
display={page.display || ListDisplayType.CARD} cardRows={cardRows}
fetchFn={fetch} display={page.display || ListDisplayType.CARD}
handlePlayQueueAdd={handlePlayQueueAdd} fetchFn={fetch}
height={height} handlePlayQueueAdd={handlePlayQueueAdd}
initialScrollOffset={page?.grid.scrollOffset || 0} height={height}
itemCount={checkAlbumList?.data?.totalRecordCount || 0} initialScrollOffset={page?.grid.scrollOffset || 0}
itemData={itemData} itemCount={checkAlbumList?.data?.totalRecordCount || 0}
itemGap={20} itemData={itemData}
itemSize={150 + page.grid?.size} itemGap={20}
itemType={LibraryItem.ALBUM} itemSize={150 + page.grid?.size}
minimumBatchSize={40} itemType={LibraryItem.ALBUM}
route={{ loading={checkAlbumList.isLoading}
route: AppRoute.LIBRARY_ALBUMS_DETAIL, minimumBatchSize={40}
slugs: [{ idProperty: 'id', slugProperty: 'albumId' }], route={{
}} route: AppRoute.LIBRARY_ALBUMS_DETAIL,
setItemData={setItemData} slugs: [{ idProperty: 'id', slugProperty: 'albumId' }],
width={width} }}
onScroll={handleGridScroll} setItemData={setItemData}
/> width={width}
onScroll={handleGridScroll}
/>
</>
)} )}
</AutoSizer> </AutoSizer>
) : ( ) : (

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

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