Prevent "Loading PDF..." message and show transition instead?

[maxpaleo]

Hi guys,

We have integrated the library to in our application and are rendering a pdf from an HTML canvas. The issue is that every time a change is made in the canvas, react-pdf makes the element go black for half a second and shows "Loading pdf..." we are trying to find a solution to bypass this and instead have a transition from the version before the change to the new version.

Here is a short video that shows the issue: https://www.loom.com/share/436ea5eb86fc457eb0b94861627b1333

[wojtekmaj]

I believe a very similar problem was tackled here: diegomura/react-pdf-site#91

[maxpaleo]

This looks perfect, thanks!

[nicholsss]

This looks perfect, thanks!

Were u able to fix this issue? I'm facing same kind issue, and the provided solutation from link did not work for me.

Here is my code and the flicker seem to still occur.

This is how i use the PDFViewer at other components:

           <PDFViewer>
              <RenderPDF resume={resume} />
            </PDFViewer>

And here is the PDFViewer component:

'use client';
import styled from '@emotion/styled';
import React, {
  ReactElement,
  useState,
  useCallback,
  useEffect,
  useMemo,
  useRef,
} from 'react';
import { pdfjs, Document, Page } from 'react-pdf';
import { pdf } from '@react-pdf/renderer';
import { useViewportSize } from '@mantine/hooks';
import 'react-pdf/dist/Page/TextLayer.css';
import 'react-pdf/dist/Page/AnnotationLayer.css';
import PageNavigator from './PageNavigator';

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/build/pdf.worker.min.js',
  import.meta.url,
).toString();

const Wrapper = styled.div`
  flex: 1;
  height: 100%;
  display: flex;
  position: relative;
  flex-direction: column;
`;

const DocumentWrapper = styled.div`
  flex: 1;
  padding: 1em;
  display: flex;
  z-index: 500;
  align-items: center;
  justify-content: center;

  .react-pdf__Document {
    &.previous-document {
      canvas {
        opacity: 0.5;
      }
    }

    &.rendering-document {
      position: absolute;

      .react-pdf__Page {
        box-shadow: none;
      }
    }
  }
`;

const Message = styled.div<{ active: boolean }>`
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  z-index: 1000;
  position: absolute;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  transition: all 1s;
  opacity: ${(props) => (props.active ? 1 : 0)};
  pointer-events: ${(props) => (props.active ? 'all' : 'none')};
`;

interface PDFViewerProps {
  children: ReactElement;
  style?: React.CSSProperties;
}

const PDFViewer: React.FC<PDFViewerProps> = ({ children, style }) => {
  const [numPages, setNumPages] = useState<number | null>(null);
  const [currentPage, setCurrentPage] = useState<number>(1);
  const [pdfBlob, setPdfBlob] = useState<Blob | null>(null);
  const [previousPdfBlob, setPreviousPdfBlob] = useState<Blob | null>(null);
  const { height, width } = useViewportSize();
  const previousChildrenRef = useRef<ReactElement | null>(null);
  const [isRendering, setIsRendering] = useState<boolean>(false);

  const generatePdfBlob = useCallback(async (childrenElement: ReactElement) => {
    setIsRendering(true);
    const blob = await pdf(childrenElement).toBlob();
    setIsRendering(false);
    return blob;
  }, []);

  useEffect(() => {
    const hasChildrenChanged =
      !previousChildrenRef.current ||
      JSON.stringify(previousChildrenRef.current.props) !==
        JSON.stringify(children.props);

    if (hasChildrenChanged) {
      generatePdfBlob(children).then((blob) => {
        if (blob) {
          if (pdfBlob) {
            setPreviousPdfBlob(pdfBlob);
          }
          setPdfBlob(blob);
        }
      });
      previousChildrenRef.current = children;
    }
  }, [children, generatePdfBlob, pdfBlob]);

  const currentFile = useMemo(
    () => (pdfBlob ? { url: URL.createObjectURL(pdfBlob) } : null),
    [pdfBlob],
  );

  const previousFile = useMemo(
    () =>
      previousPdfBlob ? { url: URL.createObjectURL(previousPdfBlob) } : null,
    [previousPdfBlob],
  );

  useEffect(() => {
    return () => {
      if (currentFile?.url) URL.revokeObjectURL(currentFile.url);
      if (previousFile?.url) URL.revokeObjectURL(previousFile.url);
    };
  }, [currentFile, previousFile]);

  const onPreviousPage = useCallback(() => {
    setCurrentPage((prev) => Math.max(prev - 1, 1));
  }, []);

  const onNextPage = useCallback(() => {
    setCurrentPage((prev) => Math.min(prev + 1, numPages || prev));
  }, [numPages]);

  const onDocumentLoad = useCallback(({ numPages }: { numPages: number }) => {
    setNumPages(numPages);
    setCurrentPage((prev) => Math.min(prev, numPages));
  }, []);

  const { pageWidth, pageHeight } = useMemo(() => {
    const isMobile = width < 768;
    const aspectRatio = 297 / 210; // A4 aspect ratio
    if (isMobile) {
      const pageWidth = width * 0.8;
      const pageHeight = pageWidth * aspectRatio;
      return { pageWidth, pageHeight };
    } else {
      return {
        pageWidth: width >= 768 ? 0.3 * width : 0.4 * width,
        pageHeight: width >= 768 ? 0.3 * height : 0.4 * height,
      };
    }
  }, [width, height]);

  const isFirstRendering = !previousPdfBlob;
  const isBusy = isRendering;

  return (
    <Wrapper>
      <Message active={isFirstRendering && isBusy}>Rendering PDF...</Message>

      <Message active={!isRendering && !children}>
        You are not rendering a valid document
      </Message>

      <DocumentWrapper>
        {isBusy && previousFile && (
          <Document
            key={previousFile.url}
            className="previous-document"
            file={previousFile}
          >
            <Page
              key={`previous-page-${currentPage}`}
              width={pageWidth}
              height={pageHeight}
              pageNumber={currentPage}
            />
          </Document>
        )}

        {!isBusy && currentFile && (
          <Document
            key={currentFile.url}
            className={isBusy ? 'rendering-document' : undefined}
            file={currentFile}
            onLoadSuccess={onDocumentLoad}
          >
            <Page
              key={`page-${currentPage}`}
              width={pageWidth}
              height={pageHeight}
              pageNumber={currentPage}
            />
          </Document>
        )}
      </DocumentWrapper>

      <PageNavigator
        currentPage={currentPage}
        numPages={numPages}
        onPreviousPage={onPreviousPage}
        onNextPage={onNextPage}
      />
    </Wrapper>
  );
};

export default React.memo(PDFViewer);