Enhancing React Apps: Server Image Preview Component

const PdfViewer = ({ url }) => {
  const iframeRef = useRef(null);
  const interval = useRef();

  const pdfUrl = createGdocsUrl(url);

  const [loaded, setLoaded] = useState(false);

  const clearCheckingInterval = () => {
    clearInterval(interval.current);
  };

  const onIframeLoaded = () => {
    clearCheckingInterval();
    setLoaded(true);
  };

  useEffect(() => {
    interval.current = setInterval(() => {
      try {
        // google docs page is blank (204), hence we need to reload the iframe.
        if (iframeRef.current.contentWindow.document.body.innerHTML === '') {
          iframeRef.current.src = pdfUrl;
        }
      } catch (e) {
        // google docs page is being loaded, but will throw CORS error.
        // it mean that the page won't be blank and we can remove the checking interval.
        onIframeLoaded();
      }
    }, 4000); // 4000ms is reasonable time to load 2MB document

    return clearCheckingInterval;
  }, []);

  return (
    <div className={css['pdf-iframe__wrapper']}>
      <iframe
        ref={iframeRef}
        className={css['pdf-iframe__inside']}
        frameBorder="no"
        onLoad={onIframeLoaded}
        src={pdfUrl}
        title="PDF Viewer"
      />

      {!loaded && (
        <div className={css['pdf-iframe__skeleton']}>
          <Skeleton height="100%" rectRadius={{ rx: 0, ry: 0 }} width="100%" />
        </div>
      )}
    </div>
  );
};