import { Outlet } from 'react-router-dom';
  import { ImagePreloader } from 'react-preload-images';
  
  import './App.css';
  
  import img7 from './assets/images/react7.svg';
  import img6 from './assets/images/react6.svg';
  import img5 from './assets/images/react5.svg';
  import img4 from './assets/images/react4.svg';
  import img3 from './assets/images/react3.svg';
  import img2 from './assets/images/react2.svg';
  import img1 from './assets/images/react.svg';
  
  const Root = () => {
    const imgs = [img1, img2, img3, img4, img5, img6, img7];
    return (
      <>
        <Outlet />
        <ImagePreloader
          imagePaths={imgs}
          fallback={<span>Loading!!!</span>}
          indicator={<span>Done</span>}
        />
      </>
    );
  };

interface IImagePreloader {
  imagePaths?: string[];
  imageUrls?: string[];
  fallback?: React.ReactElement;
  indicator?: React.ReactElement;
}

function App() {
  return (
    <ImagePreloader
      imagePaths={imgs}
      fallback={<span>Loading!!!</span>}
      indicator={<span>Done</span>}
    />
  )
}

interface IImagePreloader {
  imagePaths?: string[];
  imageUrls?: string[];
  imageDirectoryPath?: string;
  fallback?: React.ReactElement;
  indicator?: React.ReactElement;
}

function App() {
  return (
    <ImagePreloader
      imagePaths={imgs}
      imageDirectoryPath={`/public/preload`}
      fallback={<span>Loading!!!</span>}
      indicator={<span>Done</span>}
    />
  )
}

function Component() {
  const { isLoading, loadingPercent } = useCustomHook(options);

  return (
     isLoading ? loadingPercent : indicator
  );
}