Component to preload images

Preload.tsx

import { FC, PropsWithChildren, ReactNode, useEffect, useState } from "react";

interface Props {
  srcSets: { [key: string]: string };
  fallback?: ReactNode;
}

const Preload: FC<PropsWithChildren<Props>> = ({
  children,
  fallback,
  srcSets,
}) => {
  const [isLoaded, setIsLoaded] = useState(false);
  useEffect(() => {
    Promise.all(
      Object.values(srcSets).map(
        (src) =>
          new Promise<void>((resolve) => {
            const img = new Image();
            img.onload = () => {
              resolve();
            };
            img.src = src;
          })
      )
    ).then(() => {
      setIsLoaded(true);
    });
  }, [srcSets]);
  if (isLoaded) {
    return <>{children}</>;
  } else {
    return <>{fallback}</>;
  }
};

export default Preload;