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

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

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

const Placeholder: React.FC = () => {
  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;