third-party-mirrors/navidrome
1
0
Fork 0
mirror of https://github.com/navidrome/navidrome.git synced 2025-06-18 07:53:19 +03:00
Code Issues Packages Projects Releases Wiki Activity

Remove flickering when loading/refreshing Playlist show view

Browse Source
This commit is contained in:
Deluan 2020-06-04 16:54:30 -04:00
parent 51fb1d1349
commit b597a34cb4
2 changed files with 20 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
ui/src/playlist/PlaylistDetails.js
View File

@ -35,7 +35,8 @@ const useStyles = makeStyles((theme) => ({
}, },
})) }))
const PlaylistDetails = ({ record }) => { const PlaylistDetails = (props) => {
const { record = {} } = props
const translate = useTranslate() const translate = useTranslate()
const classes = useStyles() const classes = useStyles()
@ -43,13 +44,22 @@ const PlaylistDetails = ({ record }) => {
<Card className={classes.container}> <Card className={classes.container}>
<CardContent className={classes.details}> <CardContent className={classes.details}>
<Typography variant="h5" className={classes.title}> <Typography variant="h5" className={classes.title}>
{record.name} {record.name || translate('ra.page.loading')}
</Typography> </Typography>
<Typography component="h6">{record.comment}</Typography> <Typography component="h6">{record.comment}</Typography>
<Typography component="p"> <Typography component="p">
{record.songCount ? (
<span>
{record.songCount}{' '} {record.songCount}{' '}
{translate('resources.song.name', { smart_count: record.songCount })}{' '} {translate('resources.song.name', {
· <DurationField record={record} source={'duration'} /> smart_count: record.songCount,
})}
{' · '}
<DurationField record={record} source={'duration'} />
</span>
) : (
<span>&nbsp;</span>
)}
</Typography> </Typography>
</CardContent> </CardContent>
</Card> </Card>

12
ui/src/playlist/PlaylistShow.js
View File

@ -9,14 +9,10 @@ import PlaylistSongBulkActions from './PlaylistSongBulkActions'
const PlaylistShow = (props) => { const PlaylistShow = (props) => {
const viewVersion = useSelector((s) => s.admin.ui && s.admin.ui.viewVersion) const viewVersion = useSelector((s) => s.admin.ui && s.admin.ui.viewVersion)
const { data: record, loading, error } = useGetOne('playlist', props.id, { const { data: record, error } = useGetOne('playlist', props.id, {
v: viewVersion, v: viewVersion,
}) })
if (loading) {
return null
}
if (error) { if (error) {
return <p>ERROR: {error}</p> return <p>ERROR: {error}</p>
} }
@ -27,14 +23,16 @@ const PlaylistShow = (props) => {
<PlaylistSongs <PlaylistSongs
{...props} {...props}
playlistId={props.id} playlistId={props.id}
title={<Title subTitle={record.name} />} title={<Title subTitle={record && record.name} />}
actions={<PlaylistActions />} actions={<PlaylistActions />}
filter={{ playlist_id: props.id }} filter={{ playlist_id: props.id }}
resource={'playlistTrack'} resource={'playlistTrack'}
exporter={false} exporter={false}
perPage={-1} perPage={-1}
pagination={null} pagination={null}
bulkActionButtons={<PlaylistSongBulkActions playlistId={props.id} />} bulkActionButtons={
<PlaylistSongBulkActions playlistId={props.id} record={record} />
}
/> />
</> </>
) )