Achieving a Smooth PDF Preview Update Without Flicker

[nicholsss]

Hello In my application when user press save on their form section it makes an server action to update the server side which then calls revalidatePath to the page where my PDFViewer is.

My problem here is that when PDF get re-rendered there is a little flicker that shows "loading PDF..." This is not an functionality i'm aiming for. What i would want is to have somewhat replication from React-pdf/repl https://react-pdf.org/repl

So how do i can get rid of the flicker and instead have the PDF showing there constantly, and then showing the re-rendered pdf to have a preview like PDFViewer.

Provided video to demostrate the problem:
Screencast from 12.08.2024 15.15.01.webm

Here is code that i'm currently using:

Sorry for the long code snippet, but it's all related to the issue I'm facing.

Edit: Code is now edited to working code. Only issue i get now that sometimes i Have Error
Warning: Encountered two children with the same key, blob:http://localhost:3000/123. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

I think one big thing that was the problem was the way how i was importing the pdfjs. Now after importing it the way i have now in code, it made the pdf transition alot faster.
div

PDFViewer.tsx:

'use client';
import React, { useState, useCallback, useMemo, useRef } from 'react';
import styled from '@emotion/styled';
import { pdf } from '@react-pdf/renderer';
import { Document, Page, pdfjs } from 'react-pdf';
import { useAsync } from 'react-use';
import PageNavigator from './PageNavigator';
import { useViewportSize } from '@mantine/hooks';
import isEqual from 'lodash/isEqual';

import src from 'pdfjs-dist/build/pdf.worker.js';
pdfjs.GlobalWorkerOptions.workerSrc = src;

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 {
    &.rendering-document {
      position: absolute;
      .react-pdf__Page {
        box-shadow: none;
      }
    }
  }
  .react-pdf__Page {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }
  .react-pdf__Page__canvas {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: 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: React.ReactElement;
}

const PDFViewer: React.FC<PDFViewerProps> = ({ children }) => {
  const [numPages, setNumPages] = useState<number | null>(null);
  const [currentPage, setCurrentPage] = useState(1);
  const [previousRenderValue, setPreviousRenderValue] = useState<string | null>(
    null,
  );

  const { height, width } = useViewportSize();

  const lastChildrenRef = useRef<React.ReactElement | null>(null);

  // Memoize children only if they've changed, using Lodash's isEqual
  const memoizedChildren = useMemo(() => {
    if (React.isValidElement(children)) {
      console.log('children', children);
      console.log('lastChildrenRef.current', lastChildrenRef.current);
      if (
        !React.isValidElement(lastChildrenRef.current) ||
        !isEqual(children.props, lastChildrenRef.current.props)
      ) {
        lastChildrenRef.current = children;
        return children;
      }
    }
    return lastChildrenRef.current;
  }, [children]);

  const render = useAsync(async () => {
    if (!memoizedChildren) return null;
    await new Promise((resolve) => setTimeout(resolve, 1000)); // Wait for 300ms
    const blob = await pdf(memoizedChildren).toBlob();
    console.log('blob', blob);
    const url = URL.createObjectURL(blob);
    console.log('Blob Url', url);
    return url;
  }, [memoizedChildren]);

  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 preventContextMenu = useCallback((e: React.MouseEvent) => {
    e.preventDefault();
  }, []);

  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 = !previousRenderValue;

  const isLatestValueRendered = previousRenderValue === render.value;
  const isBusy = render.loading || !isLatestValueRendered;

  const shouldShowTextLoader = isFirstRendering && isBusy;
  const shouldShowPreviousDocument = !isFirstRendering && isBusy;

  return (
    <Wrapper>
      <Message active={shouldShowTextLoader}>Rendering PDF...</Message>
      <DocumentWrapper onContextMenu={preventContextMenu}>
        {shouldShowPreviousDocument && previousRenderValue ? (
          <Document
            key={previousRenderValue}
            className="previous-document"
            file={previousRenderValue}
            loading={null}
          >
            <Page
              key={currentPage}
              pageNumber={currentPage}
              width={pageWidth}
              height={pageHeight}
              renderAnnotationLayer={false}
              renderTextLayer={false}
            />
          </Document>
        ) : null}

        <Document
          key={render.value}
          className={shouldShowPreviousDocument ? 'rendering-document' : null}
          file={render.value}
          loading={null}
          onLoadSuccess={onDocumentLoad}
          onLoadError={console.error}
        >
          <Page
            key={currentPage}
            pageNumber={currentPage}
            onRenderSuccess={() => setPreviousRenderValue(render.value || null)}
            width={pageWidth}
            height={pageHeight}
            loading={null}
            renderAnnotationLayer={false}
            renderTextLayer={false}
            onLoadError={console.error}
          />
        </Document>
      </DocumentWrapper>
      <PageNavigator
        currentPage={currentPage}
        numPages={numPages}
        onNextPage={onNextPage}
        onPreviousPage={onPreviousPage}
      />
    </Wrapper>
  );
};

export default React.memo(PDFViewer);

How the PDFViewer is used:

'use client';

import PDFViewer from './PDFViewer';
import RenderPDF from './RenderSelectedResume';

import dynamic from 'next/dynamic';
import { signOut } from 'next-auth/react';

const PDFDownloadLink = dynamic(
  () => import('@react-pdf/renderer').then((mod) => mod.PDFDownloadLink),
  {
    ssr: false,
    loading: () => <p>Loading...</p>,
  },
);
const ResumeBuilder: React.FC<ResumeBuilderProps> = ({
  resume,
}) => {
(
          <div>
            <PDFViewer>
              <RenderPDF resume={resume} />
            </PDFViewer>
          </div>

  );
};

export default ResumeBuilder;