How to gracefully reload server updated pdf?

[sebastiaandegeus]

Hi,

How to do I gracefully reload the pdf without showing the loading text and without "flashing".
Basically showing the new updated pdf after the rendering is complete.

return (
  <Document file={file} onLoadSuccess={onDocumentLoadSuccess}>
    <Page pageNumber={1} />
  </Document>
)

The file is updated using the standard useState hooks.

[wojtekmaj]

This might be of interest for you: diegomura/react-pdf-site#91

[lancejpollard]

Yeah I am getting this too. I disabled the loading text with <Document loading="" but the flash still is present. So what is the solution? I don't see how that link you posted is relevant @wojtekmaj.

[lancejpollard]

I tried like this, but still getting the flash?

import '~/utilities/client/pdf'
import cx from 'classnames'
import React, {
  ChangeEvent,
  useCallback,
  useMemo,
  useRef,
  useState,
} from 'react'
import { Document, Page } from 'react-pdf'
import _ from 'lodash'
import { useSize } from '@termsurf/vine'
import { usePPI } from '~/components/Inches'

// https://github.com/wojtekmaj/react-pdf/issues/1539
// https://github.com/diegomura/react-pdf-site/pull/91/files
export default function PDF({
  data,
  error,
  className,
}: {
  data?: ArrayBuffer
  error?: string
  className?: string
}) {
  const containerRef = useRef(null)
  const size = useSize(containerRef)
  // const [numPages, setNumPages] = useState<number>(1)
  const [previousRenderValue, setPreviousRenderValue] =
    useState<ArrayBuffer>()

  const pdfSlice = useMemo(
    () => (data ? new Uint8Array(data.slice(0)) : undefined),
    [data],
  )

  const isFirstRendering = !previousRenderValue

  const isLatestValueRendered = previousRenderValue === pdfSlice
  const isBusy = !isLatestValueRendered

  const shouldShowPreviousDocument = !isFirstRendering && isBusy

  const pdfDocument = useMemo(() => {
    if (shouldShowPreviousDocument && previousRenderValue) {
      return (
        <Document
          // key="pdf-old"
          className="previous-document"
          file={previousRenderValue}
          loading={null}
        >
          <Page pageNumber={1} />
        </Document>
      )
    }

    return (
      <Document
        // key="pdf-new"
        className={
          shouldShowPreviousDocument ? 'rendering-document' : undefined
        }
        file={{ data: pdfSlice }}
        loading={null}
        // onLoadSuccess={handlePDFLoad}
      >
        <Page
          pageNumber={1}
          width={size?.width ?? 800}
          onRenderSuccess={() => {
            const buffer = pdfSlice?.buffer
            if (buffer) {
              setPreviousRenderValue(buffer.slice(0))
            }
          }}
        />
      </Document>
    )
  }, [
    pdfSlice,
    size?.width,
    previousRenderValue,
    shouldShowPreviousDocument,
  ])

  return (
    <div
      className={cx(className, 'w-full')}
      ref={containerRef}
    >
      {pdfSlice ? pdfDocument : error}
    </div>
  )
}

[nicholsss]

@lancejpollard @sebastiaandegeus were u able to fix The flashing? I'm currently same kind problem, where when The pdf is updated, it "flashes" so it can get updated

[lancejpollard]

I don't think I fixed it.