Wait for load before setting background color

src/renderer/features/albums/routes/album-detail-route.tsx

@@ -18,7 +18,7 @@ const AlbumDetailRoute = () => {
 
   const { albumId } = useParams() as { albumId: string };
   const detailQuery = useAlbumDetail({ id: albumId });
-  const background = useFastAverageColor(detailQuery.data?.imageUrl);
+  const background = useFastAverageColor(detailQuery.data?.imageUrl, !detailQuery.isLoading);
   const handlePlayQueueAdd = usePlayQueueAdd();
   const playButtonBehavior = usePlayButtonBehavior();
 

src/renderer/features/playlists/routes/playlist-detail-route.tsx

@@ -18,7 +18,11 @@ const PlaylistDetailRoute = () => {
   const { playlistId } = useParams() as { playlistId: string };
 
   const detailQuery = usePlaylistDetail({ id: playlistId });
-  const background = useFastAverageColor(detailQuery?.data?.imageUrl, 'dominant');
+  const background = useFastAverageColor(
+    detailQuery?.data?.imageUrl,
+    !detailQuery?.isLoading,
+    'dominant',
+  );
 
   const handlePlayQueueAdd = usePlayQueueAdd();
   const playButtonBehavior = usePlayButtonBehavior();

src/renderer/hooks/use-fast-average-color.tsx

@@ -1,17 +1,17 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FastAverageColor } from 'fast-average-color';
 
 export const useFastAverageColor = (
   src?: string | null,
+  srcLoaded?: boolean,
   aglorithm?: 'dominant' | 'simple' | 'sqrt',
 ) => {
-  const isMountedRef = useRef<boolean | null>(null);
   const [color, setColor] = useState<string | undefined>(undefined);
 
   useEffect(() => {
     const fac = new FastAverageColor();
 
-    if (src) {
+    if (src && srcLoaded) {
       fac
         .getColorAsync(src, {
           algorithm: aglorithm || 'dominant',
@@ -28,16 +28,14 @@ export const useFastAverageColor = (
           console.log('Error fetching average color', e);
           return setColor('rgba(0, 0, 0, 0)');
         });
-    } else if (isMountedRef.current) {
+    } else if (srcLoaded) {
       return setColor('var(--placeholder-bg)');
-    } else {
-      isMountedRef.current = true;
     }
 
     return () => {
       fac.destroy();
     };
-  }, [aglorithm, src]);
+  }, [aglorithm, srcLoaded, src]);
 
   return color;
 };