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({
|
const useCoverStyles = makeStyles({
|
||||||
|
coverContainer: {
|
||||||
|
width: '100%',
|
||||||
|
aspectRatio: '1',
|
||||||
|
overflow: 'hidden',
|
||||||
|
},
|
||||||
cover: {
|
cover: {
|
||||||
display: 'inline-block',
|
display: 'inline-block',
|
||||||
width: '100%',
|
width: '100%',
|
||||||
@@ -150,7 +155,7 @@ const Cover = withContentRect('bounds')(({
|
|||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div ref={measureRef}>
|
<div ref={measureRef} className={classes.coverContainer}>
|
||||||
<div ref={dragAlbumRef}>
|
<div ref={dragAlbumRef}>
|
||||||
<img
|
<img
|
||||||
key={record.id} // Force re-render when record changes
|
key={record.id} // Force re-render when record changes
|
||||||
|
|||||||
Reference in New Issue
Block a user