From d2a54243a88daed840b946b78ca3612ba8818ce3 Mon Sep 17 00:00:00 2001
From: Deluan <deluan@navidrome.org>
Date: Tue, 17 Mar 2026 20:24:21 -0400
Subject: [PATCH] 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.
---
 ui/src/album/AlbumGridView.jsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/ui/src/album/AlbumGridView.jsx b/ui/src/album/AlbumGridView.jsx
index b7db3973..c0d88d50 100644
--- a/ui/src/album/AlbumGridView.jsx
+++ b/ui/src/album/AlbumGridView.jsx
@@ -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