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

73
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]] const showPlaceholder = !anySong || anySong.albumId !== albumId
if (!anySong || anySong.albumId !== albumId) {
return null
}
}
const hasBulkActions = props.bulkActionButtons !== false
return ( return (
<> <>
<ListToolbar <ListToolbar
@ -84,28 +82,41 @@ const AlbumSongs = (props) => {
})} })}
key={version} key={version}
> >
{/*{bulkActionButtons !== false && bulkActionButtons && (*/} {bulkActionButtons !== false && bulkActionButtons && (
<BulkActionsToolbar {...controllerProps}> <BulkActionsToolbar {...controllerProps}>
{bulkActionButtons} {bulkActionButtons}
</BulkActionsToolbar> </BulkActionsToolbar>
{/*)}*/} )}
<Datagrid {showPlaceholder ? (
rowClick={(id, basePath, record) => dispatch(setTrack(record))} <DatagridLoading
{...controllerProps} classes={classes}
hasBulkActions={props.bulkActionButtons !== false} className={className}
> expand={expand}
{isDesktop && ( hasBulkActions={hasBulkActions}
<TextField nbChildren={3}
source="trackNumber" size={'small'}
sortBy="discNumber asc, trackNumber asc" />
label="#" ) : (
/> <Datagrid
)} rowClick={(id, basePath, record) => dispatch(setTrack(record))}
{isDesktop && <TextField source="title" />} {...controllerProps}
{!isDesktop && <FunctionField source="title" render={trackName} />} hasBulkActions={hasBulkActions}
{isDesktop && <TextField source="artist" />} >
<DurationField source="duration" /> {isDesktop && (
</Datagrid> <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> </Card>
</div> </div>
</> </>