From 39a114aad9f72f908d3de16dbe7a79b42a0c3c68 Mon Sep 17 00:00:00 2001 From: jeffvli Date: Tue, 20 Dec 2022 04:25:51 -0800 Subject: [PATCH] Add loading skeleton to table cell rows --- .../virtual-table/cells/album-artist-cell.tsx | 12 +++++ .../virtual-table/cells/artist-cell.tsx | 12 +++++ .../cells/combined-title-cell.tsx | 28 +++++++++-- .../virtual-table/cells/generic-cell.tsx | 12 +++++ .../components/virtual-table/index.tsx | 49 +++++++++++------- .../features/songs/routes/song-list-route.tsx | 50 +++++++++---------- 6 files changed, 118 insertions(+), 45 deletions(-) diff --git a/src/renderer/components/virtual-table/cells/album-artist-cell.tsx b/src/renderer/components/virtual-table/cells/album-artist-cell.tsx index 10289702..3ae5e660 100644 --- a/src/renderer/components/virtual-table/cells/album-artist-cell.tsx +++ b/src/renderer/components/virtual-table/cells/album-artist-cell.tsx @@ -6,8 +6,20 @@ import type { AlbumArtist, Artist } from '/@/renderer/api/types'; import { Text } from '/@/renderer/components/text'; import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell'; import { AppRoute } from '/@/renderer/router/routes'; +import { Skeleton } from '/@/renderer/components/skeleton'; export const AlbumArtistCell = ({ value, data }: ICellRendererParams) => { + if (!value) { + return ( + + + + ); + } + return ( { + if (!value) { + return ( + + + + ); + } + return ( ` display: grid; @@ -43,16 +44,37 @@ const StyledImage = styled.img` export const CombinedTitleCell = ({ value, rowIndex, node }: ICellRendererParams) => { const artists = useMemo(() => { - return value.type === ServerType.JELLYFIN ? value.artists : value.albumArtists; + if (!value) return null; + return value?.type === ServerType.JELLYFIN ? value.artists : value.albumArtists; }, [value]); + if (!value) { + return ( + + + + + + + + + + ); + } + return ( { const displayedValue = valueFormatted || value; + if (!value) { + return ( + + + + ); + } + return ( {isLink ? ( diff --git a/src/renderer/components/virtual-table/index.tsx b/src/renderer/components/virtual-table/index.tsx index beb05370..f090cfe5 100644 --- a/src/renderer/components/virtual-table/index.tsx +++ b/src/renderer/components/virtual-table/index.tsx @@ -39,24 +39,28 @@ const tableColumns: { [key: string]: ColDef } = { GenericCell(params, { isLink: true, position: 'left' }), colId: TableColumn.ALBUM, headerName: 'Album', - valueGetter: (params: ValueGetterParams) => ({ - link: generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, { - albumId: params.data?.albumId || '', - }), - value: params.data?.album, - }), + valueGetter: (params: ValueGetterParams) => + params.data + ? { + link: generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, { + albumId: params.data?.albumId || '', + }), + value: params.data?.album, + } + : undefined, }, albumArtist: { cellRenderer: AlbumArtistCell, colId: TableColumn.ALBUM_ARTIST, headerName: 'Album Artist', - valueGetter: (params: ValueGetterParams) => params.data?.albumArtists, + valueGetter: (params: ValueGetterParams) => + params.data ? params.data.albumArtists : undefined, }, artist: { cellRenderer: ArtistCell, colId: TableColumn.ARTIST, headerName: 'Artist', - valueGetter: (params: ValueGetterParams) => params.data?.artists, + valueGetter: (params: ValueGetterParams) => (params.data ? params.data.artists : undefined), }, bitRate: { cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'left' }), @@ -64,6 +68,7 @@ const tableColumns: { [key: string]: ColDef } = { field: 'bitRate', headerComponent: (params: IHeaderParams) => GenericTableHeader(params, { position: 'left' }), valueFormatter: (params: ValueFormatterParams) => `${params.value} kbps`, + valueGetter: (params: ValueGetterParams) => (params.data ? params.data.bitRate : undefined), }, dateAdded: { cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'left' }), @@ -72,6 +77,7 @@ const tableColumns: { [key: string]: ColDef } = { headerComponent: (params: IHeaderParams) => GenericTableHeader(params, { position: 'left' }), headerName: 'Date Added', valueFormatter: (params: ValueFormatterParams) => params.value?.split('T')[0], + valueGetter: (params: ValueGetterParams) => (params.data ? params.data.createdAt : undefined), }, discNumber: { cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'center' }), @@ -81,6 +87,7 @@ const tableColumns: { [key: string]: ColDef } = { headerName: 'Disc', initialWidth: 75, suppressSizeToFit: true, + valueGetter: (params: ValueGetterParams) => (params.data ? params.data.discNumber : undefined), }, duration: { cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'center' }), @@ -90,12 +97,13 @@ const tableColumns: { [key: string]: ColDef } = { GenericTableHeader(params, { position: 'center', preset: 'duration' }), initialWidth: 100, valueFormatter: (params: ValueFormatterParams) => formatDuration(params.value * 1000), + valueGetter: (params: ValueGetterParams) => (params.data ? params.data.duration : undefined), }, genre: { cellRenderer: GenreCell, colId: TableColumn.GENRE, headerName: 'Genre', - valueGetter: (params: ValueGetterParams) => params.data.genres, + valueGetter: (params: ValueGetterParams) => (params.data ? params.data.genres : undefined), }, releaseDate: { cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'center' }), @@ -104,6 +112,7 @@ const tableColumns: { [key: string]: ColDef } = { headerComponent: (params: IHeaderParams) => GenericTableHeader(params, { position: 'center' }), headerName: 'Release Date', valueFormatter: (params: ValueFormatterParams) => params.value?.split('T')[0], + valueGetter: (params: ValueGetterParams) => (params.data ? params.data.releaseDate : undefined), }, releaseYear: { cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'center' }), @@ -111,6 +120,7 @@ const tableColumns: { [key: string]: ColDef } = { field: 'releaseYear', headerComponent: (params: IHeaderParams) => GenericTableHeader(params, { position: 'center' }), headerName: 'Year', + valueGetter: (params: ValueGetterParams) => (params.data ? params.data.releaseYear : undefined), }, rowIndex: { cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'left' }), @@ -129,20 +139,24 @@ const tableColumns: { [key: string]: ColDef } = { colId: TableColumn.TITLE, field: 'name', headerName: 'Title', + valueGetter: (params: ValueGetterParams) => (params.data ? params.data.name : undefined), }, titleCombined: { cellRenderer: CombinedTitleCell, colId: TableColumn.TITLE_COMBINED, headerName: 'Title', initialWidth: 500, - valueGetter: (params: ValueGetterParams) => ({ - albumArtists: params.data?.albumArtists, - artists: params.data?.artists, - imageUrl: params.data?.imageUrl, - name: params.data?.name, - rowHeight: params.node?.rowHeight, - type: params.data?.type, - }), + valueGetter: (params: ValueGetterParams) => + params.data + ? { + albumArtists: params.data?.albumArtists, + artists: params.data?.artists, + imageUrl: params.data?.imageUrl, + name: params.data?.name, + rowHeight: params.node?.rowHeight, + type: params.data?.type, + } + : undefined, }, trackNumber: { cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'center' }), @@ -152,6 +166,7 @@ const tableColumns: { [key: string]: ColDef } = { headerName: 'Track', initialWidth: 75, suppressSizeToFit: true, + valueGetter: (params: ValueGetterParams) => (params.data ? params.data.trackNumber : undefined), }, }; diff --git a/src/renderer/features/songs/routes/song-list-route.tsx b/src/renderer/features/songs/routes/song-list-route.tsx index 7dd56250..75f18124 100644 --- a/src/renderer/features/songs/routes/song-list-route.tsx +++ b/src/renderer/features/songs/routes/song-list-route.tsx @@ -44,7 +44,6 @@ const TrackListRoute = () => { (params: GridReadyEvent) => { const dataSource: IDatasource = { getRows: async (params) => { - console.log(`asking for ${params.startRow} to ${params.endRow}`); const limit = params.endRow - params.startRow; const startIndex = params.startRow; @@ -69,7 +68,6 @@ const TrackListRoute = () => { const songs = api.normalize.songList(songsRes, server); - console.log('songs :>> ', songs); params.successCallback(songs?.items || [], -1); }, rowCount: undefined, @@ -84,29 +82,31 @@ const TrackListRoute = () => { - data.data.uniqueId} - infiniteInitialRowCount={checkSongList.data?.totalRecordCount} - maxConcurrentDatasourceRequests={3} - rowBuffer={20} - // rowData={queue} - rowHeight={tableConfig.rowHeight || 40} - rowModelType="infinite" - rowSelection="multiple" - onGridReady={onGridReady} - /> + {!checkSongList.isLoading && ( + data.data.uniqueId} + infiniteInitialRowCount={checkSongList.data?.totalRecordCount} + rowBuffer={20} + rowHeight={tableConfig.rowHeight || 40} + rowModelType="infinite" + rowSelection="multiple" + onCellContextMenu={(e) => console.log('context', e)} + onGridReady={onGridReady} + /> + )}