The whole html page flickers each time the next button is clicked,initially but once the every pdf page is rendered it runs smoothly.I

[bimalmagar10]

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

I have tried the fix for flickering in issue #308 but it didn't work.

This is the code i used in my web application.

What's the problem here?I couldn't figure it out.

Steps to reproduce

Please check it.

Expected behavior

Navigate to pages without flickering the html content page

Actual behavior

Flickers each time I navigate to the next page on the first render.

My.Books.__.PDF.Viewer.-.Google.Chrome.2023-04-11.15-06-20.mp4

Additional information

No response

Windows 10,Next js

• Browser: Google Chrome
• React pdf version:v6.2.2
• React version:18.2.0

[xelaos]

Isn't the problem that the height of your document is to low and your footer is in the middle of the screen? I'm not sure but If so the problem would disappear if you would give the surrounding div a fixed height.

[bimalmagar10]

If that is the case, then why flickering is not seen once the page is loaded. I mean when the new page is rendered by clicking the next button it flickers, then clicking on the previous button doesn't cause flickering.

[wojtekmaj]

The reason you see the flicker is because before the page is loaded, we have no information about it whatsoever, including its dimensions. So, a placeholder loading message will be shown for a split second. You are free to style it, e.g. by adding height to the container, if you know the size of the page you're going to render.

In OP's example, height is explicitly provided, so the problem of sizing loading message is trivial. However in most cases it won't be.

Theoretically, you can get this information ahead of time by getting pages one by one using document.getPage() (where document can be obtained through success callback on Document component), and store the page information somewhere for later use. Ideally, you would do this only for the pages needed, as getPage() may get costly on large PDFs.

[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.

[Nix-C]

@wojtekmaj It may be that I'm still new to React, but your response shed a LOT of light on this behavior. If it's not already, I think this would be a great addition to the main Wiki as an FAQ.

Thank you for generous work.

[AliRa22aq]

I solved this problem by preloading and hiding the next page at the time of viewing the current page.

[bisvillallai]

I solved this problem by preloading and hiding the next page at the time of viewing the current page.

Hi mate, can you please tell me how you did this?
I'm trying to do the same thing

[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.

[github-actions]

This issue was closed because it has been stalled for 14 days with no activity.