How to hide the header bar and prevent it from "flashing" on re-render

Technical Support
1

Which product are you using?
PDF.js Express Viewer

PDF.js Express Version
8.7

Detailed description of issue
How can I disable the header from showing while the viewer is loading? It seems that once the instance is loaded, calling UI.disableElements(['header', 'toolsHeader']); will hide the header bit it will briefly show or “flash” when the viewer is initially loaded or the view is rotated.

Does your issue happen with every document, or just one?
It happens with or without documents

Code snippet

WebViewer(
      {
        path: '/webviewer/lib',
        licenseKey: '...',
      },
      viewer.current,
    ).then((instance) => {
      wvInstance = instance;
      const { Core, UI } = instance;
      UI.disableElements(['header', 'toolsHeader']);
});
3

Hello adam.beer,

You can instead disable them in the constructor like so:

WebViewer(
  {
    path: '../../../lib',
    initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf',
    disabledElements: ['toolsHeader', 'header']
  },
  document.getElementById('viewer')
).then(instance => {

this will prevent the flash

Best regards,
Tyler Gordon

4

@tgordon Introducing the disabledElements variable returns a couple errors and prevents the viewer from loading:

react-dom.production.min.js:216 TypeError: Cannot read properties of null (reading ‘style’)
at y (DocumentCropPopupContainer.js:55:28)
at DocumentCropPopupContainer.js:66:7
at Ms (react-dom.production.min.js:262:359)
at t.unstable_runWithPriority (scheduler.production.min.js:18:343)
at Vo (react-dom.production.min.js:122:325)
at Ts (react-dom.production.min.js:261:308)
at ds (react-dom.production.min.js:243:50)
at react-dom.production.min.js:123:115
at t.unstable_runWithPriority (scheduler.production.min.js:18:343)
at Vo (react-dom.production.min.js:122:325)
il @ react-dom.production.min.js:216
n.callback @ react-dom.production.min.js:216
ci @ react-dom.production.min.js:131
dl @ react-dom.production.min.js:220
As @ react-dom.production.min.js:259
t.unstable_runWithPriority @ scheduler.production.min.js:18
Vo @ react-dom.production.min.js:122
Os @ react-dom.production.min.js:252
ds @ react-dom.production.min.js:243
(anonymous) @ react-dom.production.min.js:123
t.unstable_runWithPriority @ scheduler.production.min.js:18
Vo @ react-dom.production.min.js:122
Wo @ react-dom.production.min.js:123
Go @ react-dom.production.min.js:122
hs @ react-dom.production.min.js:244
Js @ react-dom.production.min.js:289
t.render @ react-dom.production.min.js:296
(anonymous) @ index.js:201
Promise.then (async)
(anonymous) @ index.js:184
o @ bootstrap:63
(anonymous) @ bootstrap:198
(anonymous) @ webviewer-ui.min.js:1

DocumentCropPopupContainer.js:55 Uncaught (in promise) TypeError: Cannot read properties of null (reading ‘style’)
at y (DocumentCropPopupContainer.js:55:28)
at DocumentCropPopupContainer.js:66:7
at Ms (react-dom.production.min.js:262:359)
at t.unstable_runWithPriority (scheduler.production.min.js:18:343)
at Vo (react-dom.production.min.js:122:325)
at Ts (react-dom.production.min.js:261:308)
at ds (react-dom.production.min.js:243:50)
at react-dom.production.min.js:123:115
at t.unstable_runWithPriority (scheduler.production.min.js:18:343)
at Vo (react-dom.production.min.js:122:325)

5

Disabling the elements in the constructor does not seem to work. They are still showing up. No errors though.

UI version ‘8.7.0’
Core version ‘8.7.1’
webviewer.min.js ‘8.7.1’
6

I was missing the d in disabledElements … working fine :slight_smile:

7

@Maximilian.beck I was using 8.7.0 of the library. It seems that the errors no longer happen in 8.7.1!