Customize loader renderer

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';
// Your render function
<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.