By default, the `Viewer`
component uses the default spinner (`<Spinner />`
) component when loading a document.
It is not really user friendly in the case of loading a big file, because users do not know how much the document is loaded.
The `renderLoader`
option - available from 2.0.0 - solves the problem. It allows us to use a custom loader.
The option has the following signature:
(percentages: number) => ReactElement;
The `percentages`
option are the number of percentages of document size which has been loaded.
In the sample code below, the default spinner is replaced by the built-in `ProgressBar`
:
import { ProgressBar } from '@react-pdf-viewer/core';
<Viewer
fileUrl="..."
renderLoader={(percentages: number) => (
<div style={{ width: '240px' }}>
<ProgressBar progress={Math.round(percentages)} />
</div>
)}
/>;
You are free to use your own loading progress component instead of `ProgressBar`
.
See also