diff --git a/src/components/CompanyLogo.tsx b/src/components/CompanyLogo.tsx index f1da585..82a7fda 100644 --- a/src/components/CompanyLogo.tsx +++ b/src/components/CompanyLogo.tsx @@ -1,33 +1,62 @@ -import { useEffect, useState } from "react" +import { useEffect, useState, useRef } from "react"; interface CompanyLogoProps extends React.ImgHTMLAttributes { - location?: string | null + location?: string | null; } -const imageModules = import.meta.glob('/src/assets/logos/companies/*.png') -const imageModules2 = import.meta.glob('/src/assets/logos/*.png') +const imageModules = import.meta.glob('/src/assets/logos/companies/*.png'); +const imageModules2 = import.meta.glob('/src/assets/logos/*.png'); -export const CompanyLogo: React.FC = ({location, ...imgProps}) => { - const [logoSrc, setLogoSrc] = useState() +export const CompanyLogo: React.FC = ({ location, ...imgProps }) => { + const [logoSrc, setLogoSrc] = useState(); + const imageCacheRef = useRef>>({}); - useEffect(() => { - const loadImage = async () => { - try { - // Construct the path based on the location - const imagePath = (location == undefined || location == null) ? '/src/assets/logos/ferinesia-logo.png' : `/src/assets/logos/companies/${location}` - - const module = (location == undefined || location == null) ? imageModules2[imagePath] : imageModules[imagePath] - const image = await module() as any + useEffect(() => { + const loadImage = async () => { + const imagePath = (location == undefined || location == null) + ? '/src/assets/logos/ferinesia-logo.png' + : `/src/assets/logos/companies/${location}`; - setLogoSrc(image.default) - - } catch (error) { - //Ignore + // Check if the image is already loaded + if (imageCacheRef.current[imagePath]) { + if (typeof imageCacheRef.current[imagePath] === "string") { + // Image is already loaded + setLogoSrc(imageCacheRef.current[imagePath]); + } else { + // Image is still loading + const cachedImageUrl = await imageCacheRef.current[imagePath]; + setLogoSrc(cachedImageUrl); } + return; } - - loadImage() - }, [location]) - - return Company Logo -} + + // Load the image module and cache the promise + const module = (location == undefined || location == null) + ? imageModules2[imagePath] + : 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 Company Logo; +}; \ No newline at end of file