ferinesia-schedule-board/src/components/CompanyLogo.tsx

import { useEffect, useState, useRef } from "react";

interface CompanyLogoProps extends React.ImgHTMLAttributes<HTMLImageElement> {
  location?: string | null;
}

const imageModules = import.meta.glob('/src/assets/logos/companies/*.png');
const imageModules2 = import.meta.glob('/src/assets/logos/*.png');

export const CompanyLogo: React.FC<CompanyLogoProps> = ({ location, ...imgProps }) => {
  const [logoSrc, setLogoSrc] = useState<string>();
  const imageCacheRef = useRef<Record<string, string | Promise<string>>>({});

  useEffect(() => {
    const loadImage = async () => {
      const imagePath = (location == undefined || location == null)
        ? '/src/assets/logos/ferinesia-logo.png'
        : `/src/assets/logos/companies/${location}`;

      // 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;
      }

      // 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 <img src={logoSrc} alt="Company Logo" {...imgProps} />;
};