pdf-reader-web/containers/Placeholder.tsx

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

import PdfSkeleton from '../components/PdfSkeleton';
import useStore from '../store';

import { delay } from '../helpers/time';

const Placeholder: React.FunctionComponent = () => {
  const [{ progress }] = useStore();
  const [done, setDone] = useState(false);

  useEffect(() => {
    delay(1200).then(() => {
      setDone(true);
    });
  }, []);

  return (
    progress.loaded < progress.total || !done ? (
      <PdfSkeleton />
    ) : (
      null
    )
  );
};

export default Placeholder;