From adadec90704ae2546d2b9a66cf9ef585dc87f9fa Mon Sep 17 00:00:00 2001
From: Deluan <deluan@navidrome.org>
Date: Thu, 23 Jul 2026 21:02:29 -0400
Subject: [PATCH] feat(ui): show the blurhash while an album cover loads

---
 ui/src/album/AlbumGridView.jsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/ui/src/album/AlbumGridView.jsx b/ui/src/album/AlbumGridView.jsx
index 33db9e40f..ebdac6a36 100644
--- a/ui/src/album/AlbumGridView.jsx
+++ b/ui/src/album/AlbumGridView.jsx
@@ -24,6 +24,7 @@ import config from '../config'
 import { DraggableTypes } from '../consts'
 import clsx from 'clsx'
 import { AlbumDatesField } from './AlbumDatesField.jsx'
+import { BlurHashCanvas } from '../common/BlurHashCanvas'
 
 const useStyles = makeStyles(
   (theme) => ({
@@ -143,11 +144,19 @@ const Cover = withContentRect('bounds')(({
 
   return (
     <div ref={measureRef} className={classes.coverContainer}>
-      <div ref={dragAlbumRef}>
+      <div ref={dragAlbumRef} style={{ position: 'relative' }}>
+        {imageLoading && record.blurHash && (
+          <BlurHashCanvas hash={record.blurHash} className={classes.cover} />
+        )}
         <img
           src={imgUrl || undefined}
           alt={record.name}
           className={`${classes.cover} ${imageLoading ? classes.coverLoading : ''}`}
+          style={
+            imageLoading && record.blurHash
+              ? { position: 'absolute', left: 0, top: 0 }
+              : undefined
+          }
         />
       </div>
     </div>