Fix image precaching

src/components/CompanyLogo.tsx

@@ -1,33 +1,62 @@
-import { useEffect, useState } from "react"
+import { useEffect, useState, useRef } from "react";
 
 interface CompanyLogoProps extends React.ImgHTMLAttributes<HTMLImageElement> {
-  location?: string | null
+  location?: string | null;
 }
 
-const imageModules = import.meta.glob('/src/assets/logos/companies/*.png')
+const imageModules = import.meta.glob('/src/assets/logos/companies/*.png');
-const imageModules2 = import.meta.glob('/src/assets/logos/*.png')
+const imageModules2 = import.meta.glob('/src/assets/logos/*.png');
 
-export const CompanyLogo: React.FC<CompanyLogoProps> = ({location, ...imgProps}) => {
+export const CompanyLogo: React.FC<CompanyLogoProps> = ({ location, ...imgProps }) => {
-    const [logoSrc, setLogoSrc] = useState<string>()
+  const [logoSrc, setLogoSrc] = useState<string>();
+  const imageCacheRef = useRef<Record<string, string | Promise<string>>>({});
 
-    useEffect(() => {
+  useEffect(() => {
-      const loadImage = async () => {
+    const loadImage = async () => {
-        try {
+      const imagePath = (location == undefined || location == null)
-          // Construct the path based on the location
+        ? '/src/assets/logos/ferinesia-logo.png'
-          const imagePath = (location == undefined || location == null) ? '/src/assets/logos/ferinesia-logo.png' : `/src/assets/logos/companies/${location}`
+        : `/src/assets/logos/companies/${location}`;
-          
-          const module = (location == undefined || location == null) ? imageModules2[imagePath] : imageModules[imagePath] 
-          const image = await module() as any
 
-          setLogoSrc(image.default)
+      // Check if the image is already loaded
-  
+      if (imageCacheRef.current[imagePath]) {
-        } catch (error) {
+        if (typeof imageCacheRef.current[imagePath] === "string") {
-            //Ignore
+          // Image is already loaded
+          setLogoSrc(imageCacheRef.current[imagePath]);
+        } else {
+          // Image is still loading
+          const cachedImageUrl = await imageCacheRef.current[imagePath];
+          setLogoSrc(cachedImageUrl);
         }
+        return;
       }
-  
+
-      loadImage()
+      // Load the image module and cache the promise
-    }, [location])
+      const module = (location == undefined || location == null)
-  
+        ? imageModules2[imagePath]
-    return <img src={logoSrc} alt="Company Logo" {...imgProps} />
+        : imageModules[imagePath];
-}
+
+      if (module) {
+        const imagePromise = module().then((image: any) => {
+          const imageUrl = image.default;
+          // Store the loaded image URL in the cache
+          imageCacheRef.current[imagePath] = imageUrl;
+          return imageUrl;
+        });
+
+        // Store the promise in the cache
+        imageCacheRef.current[imagePath] = imagePromise;
+
+        // Set the logo source once the promise resolves
+        const loadedImageUrl = await imagePromise;
+        setLogoSrc(loadedImageUrl);
+      } else {
+        // Handle case where the module doesn't exist (optional)
+        setLogoSrc('/src/assets/logos/ferinesia-logo.png');
+      }
+    };
+
+    loadImage();
+  }, [location]);
+
+  return <img src={logoSrc} alt="Company Logo" {...imgProps} />;
+};