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

Fix Album Grid flickering

Browse Source
This commit is contained in:
Deluan 2021-05-05 15:44:48 -04:00
parent a5fc5f0ff6
commit 9e559311ad
2 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
ui/src/album/AlbumGridView.js
View File

@ -9,7 +9,7 @@ import {
import { makeStyles } from '@material-ui/core/styles' import { makeStyles } from '@material-ui/core/styles'
import withWidth from '@material-ui/core/withWidth' import withWidth from '@material-ui/core/withWidth'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import { linkToRecord, Loading, useListContext } from 'react-admin' import { linkToRecord, useListContext, Loading } from 'react-admin'
import { withContentRect } from 'react-measure' import { withContentRect } from 'react-measure'
import subsonic from '../subsonic' import subsonic from '../subsonic'
import { import {
@ -104,7 +104,7 @@ const Cover = withContentRect('bounds')(
<div ref={measureRef}> <div ref={measureRef}>
<img <img
src={subsonic.getCoverArtUrl(album, 300)} src={subsonic.getCoverArtUrl(album, 300)}
alt={album.album} alt={album.name}
className={classes.cover} className={classes.cover}
/> />
</div> </div>
@ -113,8 +113,10 @@ const Cover = withContentRect('bounds')(
) )
const AlbumGridTile = ({ showArtist, record, basePath }) => { const AlbumGridTile = ({ showArtist, record, basePath }) => {
const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
const classes = useStyles() const classes = useStyles()
const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'), {
noSsr: true,
})
return ( return (
<div className={classes.albumContainer}> <div className={classes.albumContainer}>
@ -183,7 +185,9 @@ const LoadedAlbumGrid = ({ ids, data, basePath, width }) => {
) )
} }
const AlbumGridView = ({ loading, ...props }) => const AlbumGridView = ({ albumListType, loading, ...props }) => {
loading ? <Loading /> : <LoadedAlbumGrid {...props} /> const hide = loading && albumListType === 'random'
return hide ? <Loading /> : <LoadedAlbumGrid {...props} />
}
export default withWidth()(AlbumGridView) export default withWidth()(AlbumGridView)

2
ui/src/album/AlbumList.js
View File

@ -94,7 +94,7 @@ const AlbumList = (props) => {
title={<AlbumListTitle albumListType={albumListType} />} title={<AlbumListTitle albumListType={albumListType} />}
> >
{albumView.grid ? ( {albumView.grid ? (
<AlbumGridView {...props} /> <AlbumGridView albumListType={albumListType} {...props} />
) : ( ) : (
<AlbumListView {...props} /> <AlbumListView {...props} />
)} )}