mirror of
https://github.com/navidrome/navidrome.git
synced 2026-04-17 21:19:22 -04:00
fix(ui): prevent layout flash on album grid during cover loading
Added aspect-ratio: 1 to the cover container so it reserves the correct square dimensions immediately on first render, before react-measure reports the container width. Previously, contentRect.bounds.width started as undefined/0, causing images to render with zero height and producing a brief flash of compressed tiles before the measurement callback fired.
This commit is contained in:
@@ -94,6 +94,11 @@ const useStyles = makeStyles(
|
||||
)
|
||||
|
||||
const useCoverStyles = makeStyles({
|
||||
coverContainer: {
|
||||
width: '100%',
|
||||
aspectRatio: '1',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
cover: {
|
||||
display: 'inline-block',
|
||||
width: '100%',
|
||||
@@ -150,7 +155,7 @@ const Cover = withContentRect('bounds')(({
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div ref={measureRef}>
|
||||
<div ref={measureRef} className={classes.coverContainer}>
|
||||
<div ref={dragAlbumRef}>
|
||||
<img
|
||||
key={record.id} // Force re-render when record changes
|
||||
|
||||
Reference in New Issue
Block a user