feat: show previous PDF document while the next one is being created & rendered

[wojtekmaj]

This PR adds a second <Document /> component when PdfViewer detects that the new value is being either still being converted by react-pdf/renderer or being rendered by React-PDF.

I used React-PDF's <Page />'s onRenderSuccess prop to inform PdfViewer that the PDF has been fully rendered. It does this by setting previously rendered PDF blob URL to component's state.

The second <Document /> component holds previous blob URL, while the "main" <Document />, as before, holds the latest value at all times.

By manually managing key props, React prevents updates to whatever component renders previous value, keeping it visible on the screen while the new one is loading.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
site	✅ Ready (Inspect)	Visit Preview	Sep 26, 2022 at 11:34AM (UTC)

[diegomura]

Hi @wojtekmaj ! Tried it and worked perfectly. Thanks for this improvement!

[ashiqdey]

How can we make it work with usePDF hook?

const [instance, updateInstance] = usePDF(...);

<Document
  file={instance.url}
  error="Failed"
  renderMode="canvas"
  onLoadSuccess={onLoadSuccess}
>
  {Array(page.total)
    .fill(0)
    .map((_, i) => (
      <Fragment key={i}>
        <Page width={width} pageNumber={i + 1} />
      </Fragment>
    ))}
</Document>