How to properly change the contents of a PDF preview and show a loading message?

[danielo515]

Hello, and first of all, thank you for this wonderful library.

I'm on a situation where I need to present the same PDF using two alternative layouts. When a different layout is picked, I need to re-render the document. So far, so good.
However, when I try to change any property in the component that renders the document, I get an error. I was able to fix that error by adding the property that makes the layout change be a key of the page renderer, but now I don't have any way to control the loading, and I don't know how to properly show a loading spinner or something, because PDF generation can take a while.

Here is how I'm "doing" it now:

      {/* PDF Viewer */}
      <div className="flex-1">
        <PDFViewer width="100%" height="100%" className="h-screen" key={layout}>
          <CalendarPDF
            year={year}
            events={events}
            seminarsMetadata={seminarsMetadata}
            timeZone={timeZone}
            holidayDensity={holidayDensity}
            layout={layout}
          />
        </PDFViewer>
      </div>

Any guidance is appreciated.
Many thanks!