wojtekmaj / react-pdf

Display PDFs in your React app as easily as if they were images.

Home Page:https://projects.wojtekmaj.pl/react-pdf

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

onRenderAnnotationLayerSuccess callback executing before the annotation layer is rendered on the screen

Talha345 opened this issue · comments

Before you start - checklist

  • I followed instructions in documentation written for my React-PDF version
  • I have checked if this bug is not already reported
  • I have checked if an issue is not listed in Known issues
  • If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

Hi,

I have tried using the onRenderAnnotationLayerSuccess and onRenderSuccess callbacks as I want to execute a function after the annotationLayer has rendered on my screen, however onRenderAnnotationLayerSuccess callback is executed before the paint is completed on the screen. The documentation says: "Function called when annotations are successfully rendered on the screen.", however this is not happening in my scenario.

Steps to reproduce

  1. Clone the react-pdf library
  2. Go to sample/vite/ folder and install the demo dependencies npm install
  3. Run the demo: npm run dev
  4. Go to the file sample/vite/Sample.tsx
  5. Update the page component call to:
              function test(): void {
                  alert("Annotation Layer Rendered");
              }
              
              <Page
                key={`page_${index + 1}`}
                pageNumber={index + 1}
                width={containerWidth ? Math.min(containerWidth, maxWidth) : maxWidth}
                renderAnnotationLayer={true}
                renderForms={true}
                onRenderAnnotationLayerSuccess={test}
              />

The alert will be shown before the document is displayed on the screen.

Expected behavior

The onRenderAnnotationLayerSuccess function should be executed once the annotation layer is completed rendered on the screen. Same for onRenderSuccess.

Actual behavior

The onRenderAnnotationLayerSuccess function is executed before the DOM is rendered on the screen.

Additional information

No response

Environment

  • Browser (if applicable): Chrome 122.0.6261.111
  • React-PDF version: 7.7.0
  • React version: 18