Page rendering delay on high resolution pages

[MuthuChess]

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

My PDF has some high resolution images where the page load is successful but takes few seconds to render the image on to the screen. Until then, there is a white blank page.

There is an attribute loading to show message while loading

It would be great if there is an rendering attribute to display a message when rendering in progress (between loading success and render success).

Steps to reproduce

1. Open a PDF with high resolution images
2. The page render will be delayed and a blank screen is displayed

Expected behavior

To provide an option to display some text so that the user is aware of something is happening

Actual behavior

It just displays a blank screen where is user is not aware if something is happening or if it is a blank page

Additional information

No response

Environment

• Browser (if applicable): Chrome 105.0.5195.128
• React-PDF version: 5.7.2
• React version: 16.8.6
• Webpack version (if applicable): CRA

[github-actions]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

[IshmeetSingh06]

Hello @MuthuChess were you able to solve this issue?
I am having the same issue with high quality images inside the pdf not sure what to do as i have multiple pdf's which i want to show
@wojtekmaj is there any way we can add a loading animation to wait for the images to load?

[github-actions]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

[wojtekmaj]

There cannot be a rendering placeholder like we have for loading and error, because after the page is loaded, canvas is mounted for pdf.js to paint on. What you can do, however, is to place your own loader on top, and listen to onRenderSuccess to hide it.

[wojtekmaj]

See #1149 (comment) for more info on how you can, at least to some extend, improve performance of rendering big PDFs on high resolution screens.