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:
Deluan
2026-03-17 20:24:21 -04:00
parent b013b71ba9
commit d2a54243a8

View File

@@ -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