third-party-mirrors/navidrome
1
0
Fork 0
mirror of https://github.com/navidrome/navidrome.git synced 2025-04-17 20:42:25 +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

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

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

@ -9,14 +9,10 @@ import PlaylistSongBulkActions from './PlaylistSongBulkActions'
const PlaylistShow = (props) => {
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,
})
if (loading) {
return null
}
if (error) {
return <p>ERROR: {error}</p>
}
@ -27,14 +23,16 @@ const PlaylistShow = (props) => {
<PlaylistSongs
{...props}
playlistId={props.id}
title={<Title subTitle={record.name} />}
title={<Title subTitle={record && record.name} />}
actions={<PlaylistActions />}
filter={{ playlist_id: props.id }}
resource={'playlistTrack'}
exporter={false}
perPage={-1}
pagination={null}
bulkActionButtons={<PlaylistSongBulkActions playlistId={props.id} />}
bulkActionButtons={
<PlaylistSongBulkActions playlistId={props.id} record={record} />
}
/>
</>
)