Merge pull request #10917 from marmelab/list-base-empty-while-loading

Introduce `emptyWhileLoading` on `<ListBase>`

Author: Madeorsk

docs/ListBase.md

@@ -84,6 +84,7 @@ The `<ListBase>` component accepts the following props:
 * [`debounce`](./List.md#debounce)
 * [`disableAuthentication`](./List.md#disableauthentication)
 * [`disableSyncWithLocation`](./List.md#disablesyncwithlocation)
+* [`emptyWhileLoading`](./List.md#emptywhileloading)
 * [`exporter`](./List.md#exporter)
 * [`filter`](./List.md#filter-permanent-filter)
 * [`filterDefaultValues`](./List.md#filterdefaultvalues)

packages/ra-core/src/controller/edit/EditBase.spec.tsx

@@ -11,8 +11,12 @@ import {
     WithAuthProviderNoAccessControl,
     WithRenderProps,
 } from './EditBase.stories';
+import { onlineManager } from '@tanstack/react-query';
 
 describe('EditBase', () => {
+    beforeEach(() => {
+        onlineManager.setOnline(true);
+    });
     it('should give access to the save function', async () => {
         const dataProvider = testDataProvider({
             getOne: () =>

packages/ra-core/src/controller/field/ReferenceArrayFieldBase.spec.tsx

@@ -12,8 +12,12 @@ import { ReferenceArrayFieldBase } from './ReferenceArrayFieldBase';
 import { useResourceContext } from '../../core/useResourceContext';
 import { testDataProvider } from '../../dataProvider/testDataProvider';
 import { CoreAdminContext } from '../../core/CoreAdminContext';
+import { onlineManager } from '@tanstack/react-query';
 
 describe('ReferenceArrayFieldBase', () => {
+    beforeEach(() => {
+        onlineManager.setOnline(true);
+    });
     it('should display an error if error is defined', async () => {
         jest.spyOn(console, 'error')
             .mockImplementationOnce(() => {})

packages/ra-core/src/controller/field/ReferenceFieldBase.spec.tsx

@@ -14,11 +14,15 @@ import {
     WithRenderProp,
 } from './ReferenceFieldBase.stories';
 import { RecordContextProvider } from '../record';
+import { onlineManager } from '@tanstack/react-query';
 
 describe('<ReferenceFieldBase />', () => {
     beforeAll(() => {
         window.scrollTo = jest.fn();
     });
+    beforeEach(() => {
+        onlineManager.setOnline(true);
+    });
 
     it('should display an error if error is defined', async () => {
         jest.spyOn(console, 'error')

packages/ra-core/src/controller/field/ReferenceManyCountBase.spec.tsx

@@ -6,8 +6,12 @@ import {
     LoadingState,
     Offline,
 } from './ReferenceManyCountBase.stories';
+import { onlineManager } from '@tanstack/react-query';
 
 describe('ReferenceManyCountBase', () => {
+    beforeEach(() => {
+        onlineManager.setOnline(true);
+    });
     it('should display an error if error is defined', async () => {
         jest.spyOn(console, 'error')
             .mockImplementationOnce(() => {})

packages/ra-core/src/controller/field/ReferenceManyFieldBase.spec.tsx

@@ -12,8 +12,12 @@ import { ReferenceManyFieldBase } from './ReferenceManyFieldBase';
 import { useResourceContext } from '../../core/useResourceContext';
 import { testDataProvider } from '../../dataProvider/testDataProvider';
 import { CoreAdminContext } from '../../core/CoreAdminContext';
+import { onlineManager } from '@tanstack/react-query';
 
 describe('ReferenceManyFieldBase', () => {
+    beforeEach(() => {
+        onlineManager.setOnline(true);
+    });
     it('should display an error if error is defined', async () => {
         jest.spyOn(console, 'error')
             .mockImplementationOnce(() => {})

packages/ra-core/src/controller/field/ReferenceOneFieldBase.spec.tsx

@@ -6,8 +6,12 @@ import {
     Offline,
     WithRenderProp,
 } from './ReferenceOneFieldBase.stories';
+import { onlineManager } from '@tanstack/react-query';
 
 describe('ReferenceOneFieldBase', () => {
+    beforeEach(() => {
+        onlineManager.setOnline(true);
+    });
     it('should pass the loading state', async () => {
         jest.spyOn(console, 'error')
             .mockImplementationOnce(() => {})

packages/ra-core/src/controller/input/ReferenceArrayInputBase.spec.tsx

@@ -2,8 +2,12 @@ import * as React from 'react';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { testDataProvider } from 'ra-core';
 import { Basic, Offline, WithError } from './ReferenceArrayInputBase.stories';
+import { onlineManager } from '@tanstack/react-query';
 
 describe('<ReferenceArrayInputBase>', () => {
+    beforeEach(() => {
+        onlineManager.setOnline(true);
+    });
     afterEach(async () => {
         // wait for the getManyAggregate batch to resolve
         await waitFor(() => new Promise(resolve => setTimeout(resolve, 0)));

packages/ra-core/src/controller/input/ReferenceInputBase.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import expect from 'expect';
 import { render, screen, waitFor, fireEvent } from '@testing-library/react';
-import { QueryClient } from '@tanstack/react-query';
+import { onlineManager, QueryClient } from '@tanstack/react-query';
 import { CoreAdminContext } from '../../core';
 import {
     ChoicesProps,
@@ -30,6 +30,9 @@ describe('<ReferenceInputBase />', () => {
     beforeAll(() => {
         window.scrollTo = jest.fn();
     });
+    beforeEach(() => {
+        onlineManager.setOnline(true);
+    });
 
     it('should display an error if error is defined', async () => {
         jest.spyOn(console, 'error')

packages/ra-core/src/controller/list/ListBase.spec.tsx

@@ -3,14 +3,20 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import {
     AccessControl,
     DefaultTitle,
+    EmptyWhileLoading,
+    EmptyWhileLoadingRender,
     NoAuthProvider,
     Offline,
     WithAuthProviderNoAccessControl,
     WithRenderProps,
 } from './ListBase.stories';
 import { testDataProvider } from '../../dataProvider';
+import { onlineManager } from '@tanstack/react-query';
 
 describe('ListBase', () => {
+    beforeEach(() => {
+        onlineManager.setOnline(true);
+    });
     it('should load data immediately if authProvider is not provided', async () => {
         const dataProvider = testDataProvider({
             // @ts-ignore
@@ -144,7 +150,7 @@ describe('ListBase', () => {
     it('should render the offline prop node when offline', async () => {
         const { rerender } = render(<Offline isOnline={false} />);
         await screen.findByText('You are offline, cannot load data');
-        rerender(<Offline isOnline={true} />);
+        rerender(<Offline isOnline />);
         await screen.findByText('War and Peace');
         expect(
             screen.queryByText('You are offline, cannot load data')
@@ -153,11 +159,25 @@ describe('ListBase', () => {
         await screen.findByText('You are offline, the data may be outdated');
         fireEvent.click(screen.getByText('next'));
         await screen.findByText('You are offline, cannot load data');
-        rerender(<Offline isOnline={true} />);
+        rerender(<Offline isOnline />);
         await screen.findByText('And Then There Were None');
         rerender(<Offline isOnline={false} />);
         fireEvent.click(screen.getByText('previous'));
         await screen.findByText('War and Peace');
         await screen.findByText('You are offline, the data may be outdated');
     });
+    it('should render nothing while loading if emptyWhileLoading is set to true', async () => {
+        render(<EmptyWhileLoading />);
+        expect(screen.queryByText('Loading...')).toBeNull();
+        expect(screen.queryByText('War and Peace')).toBeNull();
+        fireEvent.click(screen.getByText('Resolve books loading'));
+        await screen.findByText('War and Peace');
+    });
+    it('should render nothing while loading if emptyWhileLoading is set to true and using the render prop', async () => {
+        render(<EmptyWhileLoadingRender />);
+        expect(screen.queryByText('Loading...')).toBeNull();
+        expect(screen.queryByText('War and Peace')).toBeNull();
+        fireEvent.click(screen.getByText('Resolve books loading'));
+        await screen.findByText('War and Peace');
+    });
 });