Scenario

A new custom loader replaces the default loader image across the library:

1. When the Viewer starts loading, the library displays a custom loader image.
2. When a PDF document starts loading, the custom loader image is displayed on the layout.
3. When a PDF page starts loading, the custom loader image is displayed on the page.

What to Use

Below are the props from the RPProvider component used to implement this feature.

Prop	Objective
loaderImage	Provide a fully custom loader element to display while the PDF document is loading. Replace the default loading animation.
customVariables	Allow overriding theme CSS variables such as loader backdrop color or sizing to visually match the custom loader with your application’s design system.

import {
  RPProvider,
  RPDefaultLayout,
  RPPages,
  RPConfig,
  RPTheme
} from '@pdf-viewer/react'

// Define a loader image as JSX
const LoaderImage = (
  <svg width="40px" height="40px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
    <path
      fill="white"
      stroke="white"
      stroke-width="15"
      transform-origin="center"
      d="m148 84.7 13.8-8-10-17.3-13.8 8a50 50 0 0 0-27.4-15.9v-16h-20v16A50 50 0 0 0 63 67.4l-13.8-8-10 17.3 13.8 8a50 50 0 0 0 0 31.7l-13.8 8 10 17.3 13.8-8a50 50 0 0 0 27.5 15.9v16h20v-16a50 50 0 0 0 27.4-15.9l13.8 8 10-17.3-13.8-8a50 50 0 0 0 0-31.7Zm-47.5 50.8a35 35 0 1 1 0-70 35 35 0 0 1 0 70Z"
    >
    </path>
  </svg>
)

export const AppPdfViewer = () => {
  return (
    <RPConfig>
      <RPTheme customVariables={{ '--rp-loader-backdrop-color': '#0995EE' }}>
        <RPProvider
          src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09-test.pdf"
          loaderImage={LoaderImage}
        >
          <RPDefaultLayout>
            <RPPages/>
          </RPDefaultLayout>
        </RPProvider>
      </RPTheme>
    </RPConfig>
  )
}