Customize thumbnail spinners

By default, the thumbnail plugin uses the `Spinner` component provided by the `@react-pdf-viewer/core` package as the default loading indicator when

start loading the document
and start loading each of thumbnail when the corresponding page is visible

If you would like to change that spinner, then you can use the `renderSpinner` option. It is a function that returns a React component:

const thumbnailPluginInstance = thumbnailPlugin({
    renderSpinner: () => {
        // Your own loading indicator
    },
});

For example, let's create a loading indicator which is a single `div` element with a simple animation:

@keyframes square-spinner {
    25% {
        transform: rotateX(180deg) rotateY(0);
    }
    50% {
        transform: rotateX(180deg) rotateY(180deg);
    }
    75% {
        transform: rotateX(0) rotateY(180deg);
    }
    100% {
        transform: rotateX(0) rotateY(0);
    }
}

.square-spinner {
    background-color: rgba(0, 0, 0, 0.2);
    width: 2rem;
    height: 2rem;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-name: square-spinner;
}

The default `Spinner` can be replaced with the new indicator as

const thumbnailPluginInstance = thumbnailPlugin({
    renderSpinner: () => <div className="square-spinner" />,
});

In the live demo below, you can scroll the thumbnails area to see how the loading indicators are displayed.

(The sample code)

The document used in the example belongs to this site

Customize thumbnail spinners

See also