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

[jeetiss]

hello @maxpaleo

You miss the lib, check out https://github.com/wojtekmaj/react-pdf

[maxpaleo]

Hi @jeetiss how would this fix the rendering?

[jeetiss]

there are messes between libraries. we have https://github.com/diegomura/react-pdf for pdf creation and https://github.com/wojtekmaj/react-pdf to display existing PDFs.

https://github.com/diegomura/react-pdf#lost

You asking about https://github.com/wojtekmaj/react-pdf but I can't help you because this is repo for
https://github.com/diegomura/react-pdf 🤪

[maxpaleo]

Hi! Thanks for the answer, we are using https://github.com/wojtekmaj/react-pdf to view the pdf in the application. I just reposted this question in that library! :) We are trying to get rid of the "Loading pdf..." when a change is made and instead have a transtion

[coskuncakir]

you can add two <Documents and switch between them if its loading show the previous one basically and keep its key values the same so it wouldn't glitch

[hebontes]

Could you please provide an example, I am strugling and I can't get this right.

I am importing instance of PDF from state so I have pdf blob and url.

[leke-osez]

/* loading can be a react element or null, 
this will change the component being displayed when the pdf is loading*/

<Document
   {...props}
   loading={null}
>
  <Page
    {...props}
    loading={null}
  />
</Document>

[ArtemZakhar]

I have found a prop "loading". It expects Node or Render

<Document
      file={URL.createObjectURL(blob)}
      onLoadSuccess={onDocumentLoadSuccess}
      renderMode="canvas"
      loading={
        <Loading
          height="100%"
          backgroundColor="transparent"
        />
      }
>