attempt to prevent thread blocking from fac

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

@@ -14,14 +14,24 @@ export const getFastAverageColor = async (args: {
     algorithm?: 'dominant' | 'simple' | 'sqrt';
     src: string;
 }) => {
+    return new Promise<string>((resolve, reject) => {
+        setTimeout(() => {
             const fac = new FastAverageColor();
-    const background = await fac.getColorAsync(args.src, {
+            fac.getColorAsync(args.src, {
                 algorithm: args.algorithm || 'dominant',
                 ignoredColor: ignoredColors,
                 mode: 'speed',
+            })
+                .then((background) => {
+                    resolve(background.rgb);
+                    fac.destroy();
+                })
+                .catch((error) => {
+                    fac.destroy();
+                    reject(error);
+                });
+        });
     });
-
-    return background.rgb;
 };
 
 export const useFastAverageColor = (args: {
@@ -48,10 +58,15 @@ export const useFastAverageColor = (args: {
 
     useEffect(() => {
         let isMounted = true;
-        const fac = new FastAverageColor();
+        let fac: FastAverageColor | null = null;
 
         if (src && srcLoaded) {
             setIsLoading(true);
+
+            setTimeout(() => {
+                if (!isMounted) return;
+
+                fac = new FastAverageColor();
                 fac.getColorAsync(src, {
                     algorithm: algorithm || 'dominant',
                     ignoredColor: ignoredColors,
@@ -67,6 +82,10 @@ export const useFastAverageColor = (args: {
                             });
                             setIsLoading(false);
                         }
+                        if (fac) {
+                            fac.destroy();
+                            fac = null;
+                        }
                     })
                     .catch((e) => {
                         if (isMounted) {
@@ -79,6 +98,11 @@ export const useFastAverageColor = (args: {
                             });
                             setIsLoading(false);
                         }
+                        if (fac) {
+                            fac.destroy();
+                            fac = null;
+                        }
+                    });
             });
         } else if (srcLoaded) {
             if (isMounted) {
@@ -93,7 +117,10 @@ export const useFastAverageColor = (args: {
 
         return () => {
             isMounted = false;
+            if (fac) {
                 fac.destroy();
+                fac = null;
+            }
         };
     }, [algorithm, srcLoaded, src, id]);