Show PDF - Prevent flickering while loading

[Tockra]

Hello folks,

I've a document view in my application which should be used to show A4 PDF files.
Its a rule only to upload A4 pdf files, but the shape of the document view suggest it.
But all other shapes should be supported too.

To get the correct scale factor for the pdf I did following. Otherwise the PDF was scaled to big and did not fit on a page:

function PDFArea({ fileUrl, height, width }: PDFAreaProps) {
const containerRef = useRef<HTMLDivElement>(null);
 const [numPages, setNumPages] = useState<number>();
  const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
  const [pageDimensions, setPageDimensions] = useState<PDFPageDimensions>({
    width: 0,
    height: 0,
  });
  const [scale, setScale] = useState<number | null>(null);

  function onDocumentLoadSuccess(pdf: pdfjs.PDFDocumentProxy): void {
    setNumPages(pdf.numPages);

    // Get the dimensions of the first page (assuming all pages has the same shape)
    pdf.getPage(1).then(page => {
      const viewport = page.getViewport({ scale: 1 });
      setPageDimensions({
        width: viewport.width,
        height: viewport.height,
      });
    });
  }
  
   useEffect(() => {
    function updateContainerSize() {
      if (containerRef.current) {
        setContainerSize({
          width: containerRef.current.offsetWidth,
          height: containerRef.current.offsetHeight,
        });
        console.log(containerRef.current.offsetWidth);
      }
    }
    // Initial measurement
    updateContainerSize();
    // Update on window resize
    window.addEventListener("resize", updateContainerSize);
    // Cleanup event listener
    return () => window.removeEventListener("resize", updateContainerSize);
  }, []);
  
  // Calculate scale factor when dimensions change
  useEffect(() => {
    if (pageDimensions && containerSize.width > 0 && containerSize.height > 0) {
      const scaleX = containerSize.width / pageDimensions.width;
      const scaleY = containerSize.height / pageDimensions.height;
      // Choose the smaller scale to fit the page within the container
      const newScale = Math.min(scaleX, scaleY);
      setScale(newScale);
    }
  }, [pageDimensions, containerSize]);

 return (
    <div
      ref={containerRef}
      style={{
        width: width,
        height: height,
        overflowY: "auto",
      }}
      className="overflow-y-auto bg-gray-100 flex justify-center py-4"
    >
      <div className="w-max">
        <Document
          loading={<Logo />}
          file={fileUrl}
          onLoadSuccess={onDocumentLoadSuccess}
          options={options}
        >
          {numPages && (
            <>
              {scale === null ? (
                // Display a loading spinner or placeholder
                <Logo />
              ) : (
                // Render the PDF pages
                Array.from(new Array(numPages), (_, index) => (
                  <div
                    key={`page_${index + 1}`}
                    className="mb-8 last:mb-0 bg-white shadow-md rounded"
                  >
                    <Page
                      key={`page_${index + 1}`}
                      pageNumber={index + 1}
                      scale={scale * 0.95}
                      className="mx-auto"
                      renderMode="canvas"
                    />
                  </div>
                ))
              )}
            </>
          )}
        </Document>
      </div>
    </div>
  );
}

Now following is happening if I visit the page:

1. The Logo is shown because of loading={<Logo />}

2. Immediatly after that the pages are shown but they are empty:

3. The pdf is successfully loaded

I have a problem with step 2 and I would like to hide the whole thing until it is fully loaded. In the time between I would like to see .

Can you help me archiving this?

T