third-party-mirrors/navidrome
1
0
Fork 0
mirror of https://github.com/navidrome/navidrome.git synced 2025-05-31 07:39:40 +03:00
Code Issues Packages Projects Releases Wiki Activity

Show a Datagrid placeholder while loading

Browse Source
This commit is contained in:
Deluan 2020-04-09 22:38:40 -04:00
parent 159a6e1cad
commit 09985453aa
1 changed files with 42 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
ui/src/album/AlbumSongs.js
View File

@ -5,7 +5,8 @@ import {
FunctionField,
ListToolbar,
TextField,
useListController
useListController,
DatagridLoading
} from 'react-admin'
import classnames from 'classnames'
import { useDispatch } from 'react-redux'
@ -58,16 +59,13 @@ const AlbumSongs = (props) => {
const dispatch = useDispatch()
const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
const controllerProps = useListController(props)
const { bulkActionButtons, albumId } = props
const { loading, data, ids, version } = controllerProps
const { bulkActionButtons, albumId, expand, className } = props
const { data, ids, version } = controllerProps
if (loading) {
const anySong = data[ids[0]]
if (!anySong || anySong.albumId !== albumId) {
return null
}
}
const anySong = data[ids[0]]
const showPlaceholder = !anySong || anySong.albumId !== albumId
const hasBulkActions = props.bulkActionButtons !== false
return (
<>
<ListToolbar
@ -84,28 +82,41 @@ const AlbumSongs = (props) => {
})}
key={version}
>
{/*{bulkActionButtons !== false && bulkActionButtons && (*/}
<BulkActionsToolbar {...controllerProps}>
{bulkActionButtons}
</BulkActionsToolbar>
{/*)}*/}
<Datagrid
rowClick={(id, basePath, record) => dispatch(setTrack(record))}
{...controllerProps}
hasBulkActions={props.bulkActionButtons !== false}
>
{isDesktop && (
<TextField
source="trackNumber"
sortBy="discNumber asc, trackNumber asc"
label="#"
/>
)}
{isDesktop && <TextField source="title" />}
{!isDesktop && <FunctionField source="title" render={trackName} />}
{isDesktop && <TextField source="artist" />}
<DurationField source="duration" />
</Datagrid>
{bulkActionButtons !== false && bulkActionButtons && (
<BulkActionsToolbar {...controllerProps}>
{bulkActionButtons}
</BulkActionsToolbar>
)}
{showPlaceholder ? (
<DatagridLoading
classes={classes}
className={className}
expand={expand}
hasBulkActions={hasBulkActions}
nbChildren={3}
size={'small'}
/>
) : (
<Datagrid
rowClick={(id, basePath, record) => dispatch(setTrack(record))}
{...controllerProps}
hasBulkActions={hasBulkActions}
>
{isDesktop && (
<TextField
source="trackNumber"
sortBy="discNumber asc, trackNumber asc"
label="#"
/>
)}
{isDesktop && <TextField source="title" />}
{!isDesktop && (
<FunctionField source="title" render={trackName} />
)}
{isDesktop && <TextField source="artist" />}
<DurationField source="duration" />
</Datagrid>
)}
</Card>
</div>
</>