fix(ui): prevent duplicate getCoverArt requests on artist page
useMediaQuery defaults to false on the first render (SSR compat), causing MobileArtistDetails to briefly render on desktop. Its CSS background-image triggered a full-size image fetch before the component switched to DesktopArtistDetails, which fetched again. Pass noSsr: true so the media query evaluates synchronously, and cap the mobile background image to 800px.
This commit is contained in:
@@ -50,7 +50,9 @@ const useStyles = makeStyles(
|
|||||||
|
|
||||||
const ArtistDetails = (props) => {
|
const ArtistDetails = (props) => {
|
||||||
const record = useRecordContext(props)
|
const record = useRecordContext(props)
|
||||||
const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('sm'))
|
const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('sm'), {
|
||||||
|
noSsr: true,
|
||||||
|
})
|
||||||
const [artistInfo, setArtistInfo] = useState()
|
const [artistInfo, setArtistInfo] = useState()
|
||||||
|
|
||||||
const biography = artistInfo?.biography || record.biography
|
const biography = artistInfo?.biography || record.biography
|
||||||
|
|||||||
@@ -83,7 +83,7 @@ const useStyles = makeStyles(
|
|||||||
)
|
)
|
||||||
|
|
||||||
const MobileArtistDetails = ({ artistInfo, biography, record }) => {
|
const MobileArtistDetails = ({ artistInfo, biography, record }) => {
|
||||||
const img = subsonic.getCoverArtUrl(record)
|
const img = subsonic.getCoverArtUrl(record, 800)
|
||||||
const [expanded, setExpanded] = useState(false)
|
const [expanded, setExpanded] = useState(false)
|
||||||
const classes = useStyles({ img, expanded })
|
const classes = useStyles({ img, expanded })
|
||||||
const title = record.name
|
const title = record.name
|
||||||
|
|||||||
Reference in New Issue
Block a user