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

Add loading skeleton to table cell rows

Browse source
This commit is contained in:
jeffvli 2022-12-20 04:25:51 -08:00
parent a147b56485
commit 39a114aad9
6 changed files with 118 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/renderer/components/virtual-table/cells/album-artist-cell.tsx
View file

@ -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 (
<CellContainer position="left">
<Skeleton
height="1rem"
width="80%"
/>
</CellContainer>
);
}
return (
<CellContainer position="left">
<Text

12
src/renderer/components/virtual-table/cells/artist-cell.tsx
View file

@ -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 ArtistCell = ({ value, data }: ICellRendererParams) => {
if (!value) {
return (
<CellContainer position="left">
<Skeleton
height="1rem"
width="80%"
/>
</CellContainer>
);
}
return (
<CellContainer position="left">
<Text

28
src/renderer/components/virtual-table/cells/combined-title-cell.tsx
View file

@ -8,6 +8,7 @@ import type { AlbumArtist, Artist } from '/@/renderer/api/types';
import { Text } from '/@/renderer/components/text';
import { AppRoute } from '/@/renderer/router/routes';
import { ServerType } from '/@/renderer/types';
import { Skeleton } from '/@/renderer/components/skeleton';
const CellContainer = styled(motion.div)<{ height: number }>`
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 (
<CellContainer height={node.rowHeight || 40}>
<Skeleton>
<ImageWrapper />
</Skeleton>
<MetadataWrapper>
<Skeleton
height="1rem"
width="80%"
/>
<Skeleton
height="1rem"
mt="0.5rem"
width="60%"
/>
</MetadataWrapper>
</CellContainer>
);
}
return (
<CellContainer height={node.rowHeight || 40}>
<ImageWrapper>
<StyledImage
alt="song-cover"
alt="cover"
height={(node.rowHeight || 40) - 10}
loading="lazy"
src={value.imageUrl}
style={{}}
width={(node.rowHeight || 40) - 10}

12
src/renderer/components/virtual-table/cells/generic-cell.tsx
View file

@ -1,6 +1,7 @@
import type { ICellRendererParams } from '@ag-grid-community/core';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import { Skeleton } from '/@/renderer/components/skeleton';
import { Text } from '/@/renderer/components/text';
export const CellContainer = styled.div<{
@ -32,6 +33,17 @@ export const GenericCell = (
) => {
const displayedValue = valueFormatted || value;
if (!value) {
return (
<CellContainer position={position || 'left'}>
<Skeleton
height="1rem"
width="80%"
/>
</CellContainer>
);
}
return (
<CellContainer position={position || 'left'}>
{isLink ? (

29
src/renderer/components/virtual-table/index.tsx
View file

@ -39,24 +39,28 @@ const tableColumns: { [key: string]: ColDef } = {
GenericCell(params, { isLink: true, position: 'left' }),
colId: TableColumn.ALBUM,
headerName: 'Album',
valueGetter: (params: ValueGetterParams) => ({
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) => ({
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),
},
};

10
src/renderer/features/songs/routes/song-list-route.tsx
View file

@ -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,6 +82,7 @@ const TrackListRoute = () => {
<VirtualGridContainer>
<SongListHeader />
<VirtualGridAutoSizerContainer>
{!checkSongList.isLoading && (
<VirtualTable
alwaysShowHorizontalScroll
animateRows
@ -92,21 +91,22 @@ const TrackListRoute = () => {
suppressMoveWhenRowDragging
suppressRowDrag
suppressScrollOnNewData
blockLoadDebounceMillis={200}
cacheBlockSize={500}
cacheOverflowSize={0}
cacheOverflowSize={1}
columnDefs={columnDefs}
defaultColDef={defaultColumnDefs}
enableCellChangeFlash={false}
getRowId={(data) => data.data.uniqueId}
infiniteInitialRowCount={checkSongList.data?.totalRecordCount}
maxConcurrentDatasourceRequests={3}
rowBuffer={20}
// rowData={queue}
rowHeight={tableConfig.rowHeight || 40}
rowModelType="infinite"
rowSelection="multiple"
onCellContextMenu={(e) => console.log('context', e)}
onGridReady={onGridReady}
/>
)}
</VirtualGridAutoSizerContainer>
</VirtualGridContainer>
</AnimatedPage>