third-party-mirrors/navidrome
1
0
Fork 0
mirror of https://github.com/navidrome/navidrome.git synced 2025-06-10 04:12:29 +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

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

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