diff --git a/src/renderer/hooks/use-fast-average-color.tsx b/src/renderer/hooks/use-fast-average-color.tsx
index 9ee707d4..8bf80df7 100644
--- a/src/renderer/hooks/use-fast-average-color.tsx
+++ b/src/renderer/hooks/use-fast-average-color.tsx
@@ -1,10 +1,11 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { FastAverageColor } from 'fast-average-color';
 
 export const useFastAverageColor = (
   src?: string | null,
   aglorithm?: 'dominant' | 'simple' | 'sqrt',
 ) => {
+  const isMountedRef = useRef<boolean | null>(null);
   const [color, setColor] = useState<string | undefined>(undefined);
 
   useEffect(() => {
@@ -27,6 +28,10 @@ export const useFastAverageColor = (
           console.log('Error fetching average color', e);
           return setColor('rgba(0, 0, 0, 0)');
         });
+    } else if (isMountedRef.current) {
+      return setColor('var(--placeholder-bg)');
+    } else {
+      isMountedRef.current = true;
     }
 
     return () => {