diff --git a/packages/react-pdf/src/Document.spec.tsx b/packages/react-pdf/src/Document.spec.tsx
index 9e7d986bc..f765bd527 100644
--- a/packages/react-pdf/src/Document.spec.tsx
+++ b/packages/react-pdf/src/Document.spec.tsx
@@ -224,9 +224,11 @@ describe('Document', () => {
const { container } = await render();
const noData = container.querySelector('.react-pdf__message');
+ const wrapper = container.querySelector('.react-pdf__Document');
expect(noData).toBeInTheDocument();
expect(noData).toHaveTextContent('No PDF file specified.');
+ expect(wrapper).toHaveClass('react-pdf__Document--no-data');
});
it('renders custom no data message when given nothing and noData prop is given', async () => {
@@ -251,11 +253,30 @@ describe('Document', () => {
const { container } = await render();
const loading = container.querySelector('.react-pdf__message');
+ const wrapper = container.querySelector('.react-pdf__Document');
expect(loading).toBeInTheDocument();
+ expect(wrapper).toHaveClass('react-pdf__Document--loading');
await expect.element(page.getByText('Loading PDF…')).toBeInTheDocument();
});
+ it('removes its state modifier class after loading a file', async () => {
+ const { func: onLoadSuccess, promise: onLoadSuccessPromise } = makeAsyncCallback();
+
+ const { container } = await render(
+ ,
+ );
+
+ const wrapper = container.querySelector('.react-pdf__Document');
+
+ await onLoadSuccessPromise;
+ await waitForAsync();
+
+ expect(wrapper).not.toHaveClass('react-pdf__Document--no-data');
+ expect(wrapper).not.toHaveClass('react-pdf__Document--loading');
+ expect(wrapper).not.toHaveClass('react-pdf__Document--error');
+ });
+
it('renders custom loading message when loading a file and loading prop is given', async () => {
const { container } = await render();
@@ -284,15 +305,17 @@ describe('Document', () => {
const { container } = await render();
- expect.assertions(2);
+ expect.assertions(3);
await onLoadErrorPromise;
await waitForAsync();
const error = container.querySelector('.react-pdf__message');
+ const wrapper = container.querySelector('.react-pdf__Document');
expect(error).toBeInTheDocument();
+ expect(wrapper).toHaveClass('react-pdf__Document--error');
await expect.element(page.getByText('Failed to load PDF file.')).toBeInTheDocument();
restoreConsole();
diff --git a/packages/react-pdf/src/Document.tsx b/packages/react-pdf/src/Document.tsx
index 3f3a2bbed..d9f336f22 100644
--- a/packages/react-pdf/src/Document.tsx
+++ b/packages/react-pdf/src/Document.tsx
@@ -605,6 +605,14 @@ const Document: React.ForwardRefExoticComponent<
[otherProps, pdf],
);
+ const documentState = !file
+ ? 'no-data'
+ : pdf === undefined || pdf === null
+ ? 'loading'
+ : pdf === false
+ ? 'error'
+ : undefined;
+
function renderChildren() {
function isFulfilledContext(context: DocumentContextType): context is DocumentRenderProps {
return Boolean(context?.pdf);
@@ -623,17 +631,17 @@ const Document: React.ForwardRefExoticComponent<
}
function renderContent() {
- if (!file) {
+ if (documentState === 'no-data') {
return {typeof noData === 'function' ? noData() : noData};
}
- if (pdf === undefined || pdf === null) {
+ if (documentState === 'loading') {
return (
{typeof loading === 'function' ? loading() : loading}
);
}
- if (pdf === false) {
+ if (documentState === 'error') {
return {typeof error === 'function' ? error() : error};
}
@@ -642,7 +650,11 @@ const Document: React.ForwardRefExoticComponent<
return (
}
{...eventProps}