Performance issues when rendering large PDFs

[jesusgp22]

This might be a good question for pdf.js community itself but how does rendering large PDFs can be better handled with react-pdf?

pdf.js suggests not rendering more than 25 pages at a time:
https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#allthepages

I even had to add this to my component to keep react from trying re-create the virtual DOM of the Document:

    shouldComponentUpdate(nextProps, nextState) {
        if(nextProps.file !== this.props.file
            || nextState.numPages !== this.state.numPages
            || nextState.width !== this.state.width){
            return true
        }
        return false
    }

The problem is that I also need to dynamically set the width of the document on user interacting so I can't save myself from re-creating the virtual DOM after width changes, any way I can achieve this with your lib?

[michaeldzjap]

@jesusgp22 You probably want to use some kind of virtualization library for displaying PDF's with a lot of pages, like react-virtualized for instance. Maybe this is useful to you.

[jesusgp22]

Hey, thank you so much for your answer, I'll def check this out

You might want to add a note about this on react-pdf documentation to help others with the same performance issues or even in the future add this as a core feature for large docs.

[jesusgp22]

Following up on this @michaeldzjap I am watching some presentations on react-virtualized and it will break text search feature, is this a trade off that I can't get around?

[michaeldzjap]

I am not familiar with the text search feature I have to admit. But I suspect that it relies on the text layer for each page to be rendered in order to be able to find all the relevant results for a specific search query (e.g. a word that could be located anywhere in the document). The whole point of virtualizing a collection of elements (Page components in the case of react-pdf) is to not render them all at the same time.

I don't think there is an easy way around this unfortunately. A solution could be to keep a virtual representation of a text layer of each page in memory (like how React does this for HTML elements) and search through that instead. Might be possible.

[jesusgp22]

That's an interesting approach, I am guessing this will most likely break browser text search feature anyway, in any case I think it is ok to implement this using just a regular search box element. Now the questions are:

• How can I extract the text from the pdf to keep a "virtual" copy of the whole text layer I can search from
• After getting a list of results from the text how can I implement a feature to seek these features in the document (guessing I will need to map results to scrollbar coordinates accordingly)

[michaeldzjap]

How can I extract the text from the pdf to keep a "virtual" copy of the whole text layer I can search from

I think you would need to dig into pdf.js for this, relying on the react-pdf api probably is not enough. You can get the text content for a page using this apparently:

page.getTextContent().then(function(textContent) { ... });

After getting a list of results from the text how can I implement a feature to seek these features in the document (guessing I will need to map results to scrollbar coordinates accordingly)

Yes, that is a tricky one... You'd know the page number. Maybe it should be a 2 step operation or something. 1 - Search through the virtual text layers for a query. Keep a result of all pages that match. 2 - For each page in the result of step 1 see if it is rendered, if it is you can probably find the word rather easily, because I think each word is rendered as a separate HTML element in a text layer. If the page is not rendered yet, scroll to it with react-virtualized so that it will be rendered and then again find the HTML element that contains the first occurrence of the word/query in the text layer element tree.

Something like the above. I might think too simplistic about this, I haven't actually tried it myself. But this is how I would approach things initially I think.

[jesusgp22]

I was wondering if the biggest performance issue was rendering the text layer or the canvas, in case rendering the canvas is an issue, it might be possible to ask pdf.js to only render the text layer?
I know this is not possible with the current react-pdf API

[wojtekmaj]

@jesusgp22 Nope, you can toggle text content and annotations on/off, but canvas is currently not behind a flag. I don't see a good reason against having it toggleable, though :)

[wojtekmaj]

I think you would need to dig into pdf.js for this, relying on the react-pdf api probably is not enough.

@michaeldzjap Any reason for this? Documents's onLoadSuccess should return all pdf properties and methods, and Page's onLoadSuccess should return all page properties and methods.

If you use Document, you can get the number of pages, iterate through all of them with pdf.getPage(pageNumber) and run the code you pasted on getPage()'s results.

[michaeldzjap]

@wojtekmaj Yes, my wording was rather poor. What I meant is that pdf.getPage(), page.getTextContent() etc. all are pdf.js related rather than react-pdf specific. So although of course all those methods are perfectly well accessible through the react-pdf API, they really belong to the underlying pdf.js API.

If you use Document, you can get the number of pages, iterate through all of them with pdf.getPage(pageNumber) ...

Yes. This is exactly what I do to cache all document page widths and height on initial load when using react-pdf together with react-virtualized.

[jesusgp22]

Thank you both for this amazing discussion 👍

[MarcoNicolodi]

We are also having trouble loading long PDFs. We are loading a 17mb PDFs and the application crashes, and since we have customers with 100mb+ PDFs, crashing is not an option.

This example which is also a react wrapper to PDF.js seem to work for us. It tricks PDF.js to load only the current visible page and the ten previous pages. It looks like it has something to do with the wrapper div's styles, because when you change some of the styles it loses it lazy loading behaviour.

I couldnt reproduce this trick to your lib. But we liked react-pdf so much that we are still trying to adapt this lazy load trick to it.

We like the fact that your lib has no default toolbox and that it has mapped its props to pdf.js handlers/configs, so we can develop our customized toolbox.

So we would be glad to see it working better with long pdfs, maybe using this trick that yurydelendik/pdfjs-react uses (thats a shame that I couldnt reproduce it with your lib! )

[jesusgp22]

@MarcoNicolodi I found that react-virtualized worked really bad with react-pdf I implemented the aproach to only render a few pages but to make things work you have to render a div that has the dimensions of the pages you don't render

you can 100% integrate this with react-pdf using the document object that is returned by react-pdf and use getPage and page.getViewport methods to get the page dimensions

I built my own algorithm to detect what pages are visible and I run it everytime the user scrolls or if a resize event happens.

[wojtekmaj]

Hey everyone,
I'd like to remind you that it was never React-PDF's intention to provide the users with fully-fledged PDF reader. Instead, this is only a tool to make it. While I have a plan of creating React-PDF-based PDF reader, I'm far from it. Mozilla is working on it for years and they seem to never be done. I think it would go similar way ;)

There is some good news too, though. If I can suggest something, onRenderSuccess callback that you can define for <Page> components can be your powerful friend. You can use it to, for example, force pages to be rendered one by one:

import React, { Component } from 'react';
import { Document, Page } from 'react-pdf/build/entry.webpack';

import './Sample.less';

export default class Sample extends Component {
  state = {
    file: './test.pdf',
    numPages: null,
    pagesRendered: null,
  }

  onDocumentLoadSuccess = ({ numPages }) =>
    this.setState({
      numPages,
      pagesRendered: 0,
    });

  onRenderSuccess = () =>
    this.setState(prevState => ({
      pagesRendered: prevState.pagesRendered + 1,
    }));

  render() {
    const { file, numPages, pagesRendered } = this.state;

    /**
     * The amount of pages we want to render now. Always 1 more than already rendered,
     * no more than total amount of pages in the document.
     */
    const pagesRenderedPlusOne = Math.min(pagesRendered + 1, numPages);

    return (
      <div className="Example">
        <header>
          <h1>react-pdf sample page</h1>
        </header>
        <div className="Example__container">
          <div className="Example__container__document">
            <Document
              file={file}
              onLoadSuccess={this.onDocumentLoadSuccess}
            >
              {
                Array.from(
                  new Array(pagesRenderedPlusOne),
                  (el, index) => {
                    const isCurrentlyRendering = pagesRenderedPlusOne === index + 1;
                    const isLastPage = numPages === index + 1;
                    const needsCallbackToRenderNextPage = isCurrentlyRendering && !isLastPage;

                    return (
                      <Page
                        key={`page_${index + 1}`}
                        onRenderSuccess={
                          needsCallbackToRenderNextPage ? this.onRenderSuccess : null
                        }
                        pageNumber={index + 1}
                      />
                    );
                  },
                )
              }
            </Document>
          </div>
        </div>
      </div>
    );
  }
}

Of course you can do much more - add placeholders, check on scroll which pages need rendering, keep info on whether all pages so far were rendered... I believe in your creativity ;) And if I can be of any help regarding API, please let me know!

[MarcoNicolodi]

@jesusgp22

Hey, may you share this example?

[Moebits]

It would be VERY helpful if you can start viewing a PDF without downloading the entire file first.

You can, as long as Range header is supported by the server you're serving the content from.

Would you mind giving an example of how to do this? I tried setting options={{disableAutoFetch: true, disableStream: true}} on the Document, but it seems like it has no effect. It is still downloading the whole file before it displays anything.

My PDF files are hosted in an AWS S3 bucket which does support range requests to my knowledge.

[wojtekmaj]

Hmm, not sure about that. I'm pretty sure PDF.js will request only as much data as needed, if it's possible, e.g. when you only want to display Page 1. If it's not happening, it's on PDF.js side. There may be something else that I don't know about that might prevent partial download from happening, e.g. PDF built in a specific way or something.

[EricLiu0614]

Here's my take on hooking React-PDF to React-Window.

https://codesandbox.io/s/react-pdf-react-window-x3xzzg https://codesandbox.io/s/react-pdf-react-window-fullscreen-ky4yy0

@wojtekmaj Thank you for providing the great demo.

When I try to implement it in my application and load a large pdf file I notice the memory is keep increasing when I keep loading following pages or switch between pages. And the memory are not released until I close the browser tab.. Any idea how can we optimize it? Thank you!

[Moebits]

Hmm, not sure about that. I'm pretty sure PDF.js will request only as much data as needed, if it's possible, e.g. when you only want to display Page 1. If it's not happening, it's on PDF.js side. There may be something else that I don't know about that might prevent partial download from happening, e.g. PDF built in a specific way or something.

Ok, I figured out what the problem here was: The PDF files have to be "linearized", which means that they are saved in a way so that the file can be requested in chunks.

On a Mac, I just opened the PDF in Preview, reordered a page and put it back (otherwise it doesn't save if no changes are made), and hit File -> Save. It should save linearized by default. On Windows you will probably have to find a third party app to do it (like Acrobat).

I hope that helps anyone that was having the same issue.

[akshaysharma-tilda]

Hey! I linearized my 10mb pdf using an online tool (and can confirm it is linearized as the contents when opened in code editor have LINEARIZED/1), my Google cloud signed url returns Accept-Ranges: bytes and expose headers do contain Aceept-Ranges, so I think all the requirements are satisfied, still it just makes a single request to fetch the whole 10mb file at once :(

[HadesShadows]

Here's my take on hooking React-PDF to React-Window.

https://codesandbox.io/s/react-pdf-react-window-x3xzzg https://codesandbox.io/s/react-pdf-react-window-fullscreen-ky4yy0

This is working perfectly. Thankyou so much

EDIT: Any help to make the navigation button work in these codes?

EDIT #2: So the solution to going to specific page is given by react-window documents React-window . Previous Page and next page can also be done similarly

[ibweb3dev]

Here's my take on hooking React-PDF to React-Window.
https://codesandbox.io/s/react-pdf-react-window-x3xzzg https://codesandbox.io/s/react-pdf-react-window-fullscreen-ky4yy0

This is working perfectly. Thankyou so much

EDIT: Any help to make the navigation button work in these codes?

EDIT #2: So the solution to going to specific page is given by react-window documents React-window . Previous Page and next page can also be done similarly

I think still load the full PDF

if you pass in <Document... onLoadProgress={onDocumentLoadProgress}

  function onDocumentLoadProgress({ loaded, total }) {
    const tot = Math.round((loaded / total) * 100);

    console.log(tot);
  }

Logs will display the total load

[srinadh239]

Here's my take on hooking React-PDF to React-Window.
https://codesandbox.io/s/react-pdf-react-window-x3xzzg https://codesandbox.io/s/react-pdf-react-window-fullscreen-ky4yy0

@wojtekmaj Thank you for providing the great demo.

When I try to implement it in my application and load a large pdf file I notice the memory is keep increasing when I keep loading following pages or switch between pages. And the memory are not released until I close the browser tab.. Any idea how can we optimize it? Thank you!

@wojtekmaj @EricLiu0614 Any update on this. Even I had a similar problem, when i play around with scroll on huge pdfs, there seems to be a memory leak, which is causing page crash.
Sample PDF I used, where the memory went up to 5 gb
https://codesandbox.io/s/react-pdf-react-window-forked-jp5w5x?file=/src/App.js

[admondtamang]

It would be VERY helpful if you can start viewing a PDF without downloading the entire file first.

You can, as long as Range header is supported by the server you're serving the content from.

Would you mind giving an example of how to do this? I tried setting options={{disableAutoFetch: true, disableStream: true}} on the Document, but it seems like it has no effect. It is still downloading the whole file before it displays anything.

My PDF files are hosted in an AWS S3 bucket which does support range requests to my knowledge.

The browser does not expose Accept-Ranges and Content-Range by default. These two headers will cause pdf.js to mistakenly think that the server does not support range requests, and then directly request the entire file.

My CORS configuration for s3 bucket.

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "GET",
            "POST",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "Accept-Ranges",
            "Content-Length",
            "Content-Range"
        ]
    }
] 

Expose these header to let react-pdf known about the headers that it need to stream

[ccasper89]

Here's my take on hooking React-PDF to React-Window.
https://codesandbox.io/s/react-pdf-react-window-x3xzzg https://codesandbox.io/s/react-pdf-react-window-fullscreen-ky4yy0

@wojtekmaj Thank you for providing the great demo.
When I try to implement it in my application and load a large pdf file I notice the memory is keep increasing when I keep loading following pages or switch between pages. And the memory are not released until I close the browser tab.. Any idea how can we optimize it? Thank you!

@wojtekmaj @EricLiu0614 Any update on this. Even I had a similar problem, when i play around with scroll on huge pdfs, there seems to be a memory leak, which is causing page crash. Sample PDF I used, where the memory went up to 5 gb https://codesandbox.io/s/react-pdf-react-window-forked-jp5w5x?file=/src/App.js

The memory leak seems to be due to code sandbox and not react-pdf + react-window example. Did you try to run the example locally?

[jkgenser]

I have published the following library for rendering large PDFs. It's not yet in 1.0 but it's useful for rendering very large PDFs and lazily loading each pdf.

https://github.com/jkgenser/react-pdf-headless

This is also published to NPM: https://www.npmjs.com/package/react-pdf-headless

The DEMO app is a full example of this library being used: https://github.com/jkgenser/react-pdf-headless/blob/main/demo/App.tsx

It only depends on react-pdf and @tanstack/virtual

[AryaTheAbhishek]

I am trying to stream and render PDF pages incrementally instead of downloading the entire file before displaying anything. My backend serves the PDF with proper Range requests, and I verified that fetching the file manually using fetch() correctly sends the Range header and receives a 206 Partial Content response.
However, when I use react-pdf, it seems to ignore range requests and downloads the entire PDF before displaying anything.

fetch('http://localhost:6006/pdf', {
  headers: { Range: 'bytes=0-65535' },
})
  .then(response => response.arrayBuffer())
  .then(buffer => {
    const blob = new Blob([buffer], { type: 'application/pdf' });
    const url = URL.createObjectURL(blob);
    window.open(url);
  })
  .catch(err => console.error('Error fetching PDF:', err));

<Document 
  file="http://localhost:6006/pdf"
  onLoadSuccess={onDocumentLoadSuccess}
  options={{ disableAutoFetch: true, disableStream: true }} // Tried different combinations here
>
  <Page pageNumber={pageNumber} />
</Document>

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "GET, HEAD, OPTIONS");
  res.header("Access-Control-Allow-Headers", "Range");
  res.header("Access-Control-Expose-Headers", "Accept-Ranges, Content-Length, Content-Range");
  next();
});

app.get("/pdf", (req, res) => {
  const filePath = path.join(__dirname, "public", "sample.pdf");
  const stat = fs.statSync(filePath);
  const fileSize = stat.size;
  const range = req.headers.range;

  if (range) {
    // Handle range requests
    const parts = range.replace(/bytes=/, "").split("-");
    const start = parseInt(parts[0], 10);
    const end = parts[1] ? parseInt(parts[1], 10) : fileSize - 1;
    const chunkSize = end - start + 1;
    const file = fs.createReadStream(filePath, { start, end });

    const headers = {
      "Content-Range": `bytes ${start}-${end}/${fileSize}`,
      "Accept-Ranges": "bytes",
      "Content-Length": chunkSize,
      "Content-Type": "application/pdf",
    };

    res.writeHead(206, headers); // Partial Content
    file.pipe(res);
  } else {
    // Serve full file
    res.writeHead(200, {
      "Content-Length": fileSize,
      "Accept-Ranges": "bytes",
      "Content-Type": "application/pdf",
    });
    fs.createReadStream(filePath).pipe(res);
  }
});

Why is react-pdf not sending range requests, even though fetch() works fine?
Are there additional configurations required to enable streaming in react-pdf?

Any help is much appreciated!

[wojtekmaj]

Hmmm, that logic is entirely on pdfjs-dist side, but just a wild guess - perhaps the PDF itself is not prepared correctly or it was deemed too small by PDF.js to bother with splitting it into byte ranges?

[AryaTheAbhishek]

I even loaded a large (100MB) linearized PDF using react-pdf, but it still downloaded the whole file before displaying anything instead of streaming it in chunks
When using fetch manually with a Range header, the response correctly returns status 206 (partial content) and fetches the PDF in chunks but react-pdf does not request byte ranges

[akshaysharma-tilda]

@AryaTheAbhishek I have tried same, my pdf is 10 my and linearized, and I ensured that GCS is sending Accept-Ranges: bytes and exposed headers contain Accept-Ranges so that react-pdf can be sure that it is allowed, but it still makes call to entire file :(

[vladpoltorin1]

@akshaysharma-tilda
try to set these, it solved the streaming for me

"ExposeHeaders": [
            "Accept-Ranges",
            "Content-Length",
            "Content-Range"
 ],

[vladpoltorin1]

As an alternative to react-window I used virtua. It seemed to me working even faster and no issues with document scaling and rotation. Just wrap your list items with VList / Virtualizer and you're good to go

[JussiSpogen]

Hi there! I am trying to implement a PDF viewer that would render the first page of my document as quick as possible. Currently I have implemented a system where the PDF is stored in smaller segments to make file requests quicker to get the first page rendered quickly. How ever this causes some hard time with navigation and such because I need to implement a infinite-loading of the segments based on the scrolling of the document and so on.

I then played around with Tanstack Virtual and used the full files. I loved the development experience but even with linearized/fast-web-view documents the performance to first render was just too much worse compared to my PDF segments. I couldn't combine my method of loading PDF in segments and using Tanstack Virtual because there would be so many "hacks" needed to implement the navigation and such which makes me lose the nice features of Tanstack Virtual pretty quickly.

Would anyone have any suggestions on how I could work around these challenges and get a working virtualization with fast loading of the PDF files?

[Zloka]

How ever this causes some hard time with navigation and such because I need to implement a infinite-loading of the segments based on the scrolling of the document and so on.

Could you elaborate on what problems you faced? What type of issues did you run into, and what type of navigation are we talking about? 🙂

[JussiSpogen]

By navigation I mean the scrolling to some specific page of the document. When opening a PDF I have a initial navigation that navigates to some page in the document and after that there is an option to scroll to specific page on the PDF with a text input like all PDF viewers I've seen has.

The main issue I had was that I'd like to use Tanstack Virtual's scrollToIndex for navigation because of it's simple API and because it would basically just do what I'd want. How ever because I have virtualizer that virtualizes the segments I need to do navigation in two steps; first scroll to the segment with the scrollToIndex and then scroll to the page by other means. This results in a scrolling that feels laggy which I just don't like and therefore it doesn't work for me. I also tried scrollToOffset but I just couldn't get it to work well because of responsive UI that makes the calculations of page offsets quite hard and inconsistent.

I think if there would be some way of combining my 10-page segments to fit under a single Document I could make that work but I don't think there is a possibility for that?

[vladpoltorin1]

@JussiSpogen Don't really understand the "navigation in two steps"...
Having the initial page to scroll to (let's say from url params) and the virtualized list (that should have the exact amount of children as the amount of pages) you shouldn't face any issues using .scrollToIndex().

I'm using virtua, but the concept should be the same:

const scrollPageIntoView = useCallback((page: number) => {
    virtualPagesList.current?.scrollToIndex(page - 1)  // <-- container ref
  }, [])

useEffect(() => {
    if (!numPages) return

    if (initialPage <= numPages) {. // <---- initialPage comes from props (url param)
      setCurrentPage(initialPage)  // <--- used as an input value that user can change
      scrollThumbnailIntoView(initialPage, 'center')  // <---- scroll to the exact thumbnail
      scrollPageIntoView(initialPage) // <---- scroll to the exact page
    }
  }, [numPages, scrollThumbnailIntoView, scrollPageIntoView, initialPage])

[JussiSpogen]

First of all thank you for coming to help! So I realized I didn't clarify it enough in the first message that I need to have multiple of these segments (10-page files) loaded at the same time. So Imagine a situation that you have a 30-page document that is split into 3 segments: pages 1-10, 11-20, 21-30. These segments are separate PDF files, so they are split into 3 Document-elements. In real cases the documents have hundreds of pages but this here is just for example.

This takes me into the problem that I would need to virtualize elements in two levels as can be seen in the example below. I don't actually know if this would work, but to me it seems quite sketchy. I unfortunately don't have time just now to test it out but I think my problem is presented better now. Do you think something like this could even work or do you have better ideas?

const VirtualizedSegmentedPdf() => {

const initialSegments = [
    {startPage: 11, endPage: 20, fileSrc: "file2.pdf"},
    {startPage: 21, endPage: 30, fileSrc: "file3.pdf"},
]

const [loadedSegments, setLoadedSegments] = useState(initialSegments)

const segmentVirtualizerRef = useRef()
const pageVirtualizerRefs = useRef([])

const navigateToPage = (page) => {
    let segmentIdx = loadedSegments.find(segment => segment.startPage <= page && segment.endPage >= page)
    if (segmentIdx === -1) {
        segmentIdx = loadNewSegment()
    }
    segmentVirtualizerRef.current.scrollToIndex(segmentIdx)
    const pageVirtualizerRefIdx = // Get index of pageVirtualizerRef
    pageVirtualizerRefs.current[pageVirtualizerRefIdx].scrolltoIndex(page % 10)
}


return (
<div>
    <VList ref={segmentVirtualizerRef}>
        {loadedSegments.map( segment => (
            <Document file={segment.fileSrc} key={segment.startPage}>
                <VList ref={(ref) => pageVirtualizerRefs.push(ref)}>
                    { Array.from({length: segment.endPage-segment.startPage}).map((_, i) => (
                        <Page pageIndex={i} key={segment.startPage + i}/>
                    ))}
                </VList>
            </Document>
        )}
    </VList>
</div>
)}

[ChrystianFerreira]

Most of the example code here makes use of older versions of react-pdf. If anyone has managed to implement a combo of react-pdf@^10.0.0 and any virtualization libraries, please share! I could not get satisfactory results from the examples provided here.

I ended up on this discussion because changing the scale prop took around 1s to re-render when displaying a 14 page pdf. What I landed on was using css transform and debouncing changing the scale prop, providing a snappier feel to my zoom controls:

  const [scale, setScale] = useState(1.0);        // react-pdf render scale
  const [cssScale, setCssScale] = useState(1.0);  // CSS visual scale

  // Debounce the expensive react-pdf re-render
  const debouncedScaleUpdate = useMemo(
    () => debounce((newScale) => setScale(newScale), 250),
    []
  );

  const zoomIn = () => {
    setCssScale(prev => {
      const newScale = Math.min(prev + 0.25, 3.0);
      debouncedScaleUpdate(newScale);  
      return newScale;                 
    });
  };

  return (
    <Box 
      style={{
        transform: `scale(${cssScale / scale})`,  // Ratio gives a blurry but instant zoom, followed by a debounced re-render
        transformOrigin: 'top center',
      }}
    >
      <Document file={pdf}>
        <Page 
          pageNumber={1} 
          scale={scale}  // 'High-quality' render (debounced)
        />
      </Document>
    </Box>
  );

[JussiSpogen]

I tried virtua but couldn't get it to work properly. Here is my implementation with tanstack virtual that I got to work. I use Radix-ui here and I don't want to strip anything out of this so I don't give invalid examples, but as this is a production app I cannot give the whole component either. The Box components should be straight up divs so they should be possible to substitute with them. I can try to help in case you need some more help but hope this helps!

// Component logic
const pageVirtualizer = useVirtualizer({
    count: fileMetadata.totalPages,
    getScrollElement: () => scrollableContainer.current,
    estimateSize: () => ESTIMATED_PAGE_HEIGHT * scale,
    gap: 15,
  });


// Rendered part
<Box height="100dvh" ref={mainContainer}>
      <ToolbarComponent /* props omitted */ />
      <ScrollArea scrollbars="vertical" ref={scrollableContainer} >
        <Document
          file={fileMetadata.fileRemoteSrc}
          onLoadSuccess={onDocumentLoadSuccess}
          onLoadProgress={onDocumentLoadProgress}
          loading={<SkeletonPdf />}
          scale={scale}
          rotate={rotation}
          onItemClick={onDocumentItemClick}
        >
          <Box py="3" onKeyDown={handleKeyDown} tabIndex={0}>
            <Box style={{ height: `${pageVirtualizer.getTotalSize()}px`, position: "relative" }}>

              {pageVirtualizer.getVirtualItems().map((virtualItem) => (
                <div
                  key={virtualItem.index}
                  style={{
                    height: `${virtualItem.size}px`,
                    position: "absolute",
                    top: "0",
                    left: "50%",
                    transform: `translate(-50%, ${virtualItem.start}px)`,
                    boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)'
                  }}
                  data-page-number-actual={virtualItem.index + 1}
                  ref={observePage}
                >
                  <div
                    /* This div is needed for the scaling to work */
                    data-index={virtualItem.index}
                    ref={pageVirtualizer.measureElement}
                  >
                    <Page
                      pageIndex={virtualItem.index}
                      loading={<SkeletonPdfPage scale={scale} />}
                    />
                  </div>
                </div>
              ))}
            </Box>
          </Box>
        </Document>
      </ScrollArea>
      <SkeletonPdf progress={loadProgress} visible={!isDocumentLoaded} />
    </Box >