[bug] PDF viewer flashing when paging

[NoRulesJustFeels]

Describe the bug

The screen flashes between each page when you quickly click on the "next" link for a PDF OBJKT.

Reproduction

1. Go to: https://teia.art/objkt/799229
2. Click on the "next" link for the PDF viewer
3. The screen flashes every time you click (especially when you click fast)

Expected behavior

No flashing when paging a PDF.

Platform and versions

Ubuntu 22.04 and Windows 10
Chrome Version 107.0.5304.121 and Brave Version 1.45.133

Console output

No response

Additional context

No response

[melMass]

Agreed very disturbing

[v32k]

I was having a look and needed to untangle a few things to understand what the current state is.

First is that react-pdf doesn't seem to reuse canvases, or is just clearing and drawing in separate events I'm not really sure. This caused the primary flicker and seems very unlikely to change.

The workaround they give is to leave the previous page up until the next loads. The code currently used likely started here: https://codesandbox.io/p/sandbox/react-pdf-prevent-flash-with-scale-nse51l

This fixed one flicker but introduced another for the same reason of updates not happening simultaneously. Now there is page layout flicker from temporary DOM elements pushing things around.

A hack that can be done is to force all Page elements to be overlapping or carefully hiding overflow. The stylesheet in components/media-types/pdf looks suspiciously like someone tried this.

Setting position: absolute on both Page elements does work, but it makes pages zero size so nothing else flows around them. For controls to be placed correctly you have to manually set the height for the outer Document.

I might come back to this. I have an idea of what needs to happen I just don't know react at all.