Preload Images with React

preloadImages.tsx

import React, { FC, useEffect } from 'react';

type State = {
  progress: number;
  isLoading: boolean;
}

const useStore = create<State>((set, get) => ({
  isLoading: true,
  progress: 0,
}

// the helper
const cacheImages = async srcArray => {
  let progress = 0;
  const promises = await srcArray.map((src: string) => {
    return new Promise((resolve, reject) => {
      const img = new Image();

      img.src = src;
      img.onload = _ => {
        progress++;
  
        useStore.setState({
          progress: Math.round((progress / srcArray.length) * 100),
        });
        resolve(img)
      };
      img.onerror = _ => {
        reject();
      };
    });
  });

  await Promise.all(promises);
  progress = 100;
  useStore.setState({ isLoading: false, progress: 100 });
};



const Progress: FC = () => {
  const loadingProgress = useStore(state => state.loadingProgress);
  return <h1>{loadingProgress}</h1>;
};

// use it like this
export const Loader: FC = () => {
  const isLoading = useStore(state => state.isLoading);

  useEffect(() => {
    const imgs = ['/images/a.jpg', '/images/b.jpg', ...];
    cacheImages(imgs);
  }, []);

  return (
    isLoading && (
      <div>
        ⌛ <Progress />
      </div>
    )
  );
};