From d4e9b9b7a6209eaa812168dd8822b24645598f39 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Fri, 3 Apr 2026 20:11:10 -0700
Subject: [PATCH] adjust bg loading on album detail page

---
 .../features/albums/routes/album-detail-route.tsx   | 13 +++++--------
 src/renderer/router/app-router.tsx                  |  2 +-
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/renderer/features/albums/routes/album-detail-route.tsx b/src/renderer/features/albums/routes/album-detail-route.tsx
index 5260eb7cd..051b45e4c 100644
--- a/src/renderer/features/albums/routes/album-detail-route.tsx
+++ b/src/renderer/features/albums/routes/album-detail-route.tsx
@@ -17,9 +17,10 @@ import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library
 import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
 import { useFastAverageColor } from '/@/renderer/hooks';
 import { useAlbumBackground, useCurrentServer } from '/@/renderer/store';
-import { Spinner } from '/@/shared/components/spinner/spinner';
 import { LibraryItem } from '/@/shared/types/domain-types';
 
+const ALBUM_DETAIL_BG_FALLBACK = 'var(--theme-colors-foreground-muted)';
+
 const AlbumDetailRoute = () => {
     const scrollAreaRef = useRef<HTMLDivElement>(null);
     const headerRef = useRef<HTMLDivElement>(null);
@@ -42,25 +43,21 @@ const AlbumDetailRoute = () => {
             type: 'itemCard',
         }) || '';
 
-    const { background: backgroundColor, isLoading: isColorLoading } = useFastAverageColor({
+    const { background: backgroundColor } = useFastAverageColor({
         id: albumId,
         src: imageUrl,
         srcLoaded: true,
     });
 
-    const background = backgroundColor;
+    const background = backgroundColor ?? ALBUM_DETAIL_BG_FALLBACK;
 
     const showBlurredImage = albumBackground;
 
-    if (isColorLoading) {
-        return <Spinner container />;
-    }
-
     return (
         <AnimatedPage key={`album-detail-${albumId}`}>
             <NativeScrollArea
                 pageHeaderProps={{
-                    backgroundColor: backgroundColor || undefined,
+                    backgroundColor: backgroundColor ?? ALBUM_DETAIL_BG_FALLBACK,
                     children: (
                         <LibraryHeaderBar>
                             <LibraryHeaderBar.PlayButton
diff --git a/src/renderer/router/app-router.tsx b/src/renderer/router/app-router.tsx
index ef3214b22..2c7b2ef9b 100644
--- a/src/renderer/router/app-router.tsx
+++ b/src/renderer/router/app-router.tsx
@@ -341,5 +341,5 @@ export const AppRouter = () => {
         </HashRouter>
     );
 
-    return <Suspense fallback={<></>}>{router}</Suspense>;
+    return <Suspense fallback={<Spinner container />}>{router}</Suspense>;
 };