From 549b812633e079a1aa9c932041d7025739c593c0 Mon Sep 17 00:00:00 2001 From: Deluan Date: Sat, 14 Mar 2026 20:36:57 -0400 Subject: [PATCH] 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. --- ui/src/artist/ArtistShow.jsx | 4 +++- ui/src/artist/MobileArtistDetails.jsx | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/ui/src/artist/ArtistShow.jsx b/ui/src/artist/ArtistShow.jsx index ba8586d0..935b0bab 100644 --- a/ui/src/artist/ArtistShow.jsx +++ b/ui/src/artist/ArtistShow.jsx @@ -50,7 +50,9 @@ const useStyles = makeStyles( const ArtistDetails = (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 biography = artistInfo?.biography || record.biography diff --git a/ui/src/artist/MobileArtistDetails.jsx b/ui/src/artist/MobileArtistDetails.jsx index e8c044d6..4947a463 100644 --- a/ui/src/artist/MobileArtistDetails.jsx +++ b/ui/src/artist/MobileArtistDetails.jsx @@ -83,7 +83,7 @@ const useStyles = makeStyles( ) const MobileArtistDetails = ({ artistInfo, biography, record }) => { - const img = subsonic.getCoverArtUrl(record) + const img = subsonic.getCoverArtUrl(record, 800) const [expanded, setExpanded] = useState(false) const classes = useStyles({ img, expanded }) const title = record.name