Update WithListContext to accept optional empty, loading and error components

Author: erwanMarmelab

packages/ra-core/src/controller/list/WithListContext.stories.tsx

@@ -222,3 +222,134 @@ export const Chart = () => (
         </ListBase>
     </CoreAdminContext>
 );
+
+const emptyDataProvider = fakerestDataProvider({ fruits: [] }, true);
+
+export const Empty = () => (
+    <CoreAdminContext dataProvider={emptyDataProvider}>
+        <ListBase resource="fruits" disableSyncWithLocation perPage={100}>
+            <WithListContext<Fruit>
+                empty={<div>No fruits available</div>}
+                render={({ isPending, data, total }) =>
+                    isPending ? (
+                        <>Loading...</>
+                    ) : (
+                        <table style={{ borderSpacing: '30px 5px' }}>
+                            <thead>
+                                <tr>
+                                    <th>Date</th>
+                                    <th>Apples</th>
+                                    <th>Blueberries</th>
+                                    <th>Carrots</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {data.map(fruit => (
+                                    <tr key={fruit.id}>
+                                        <td>{fruit.date}</td>
+                                        <td>{fruit.apples}</td>
+                                        <td>{fruit.blueberries}</td>
+                                        <td>{fruit.carrots}</td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                            <tfoot>
+                                <tr>
+                                    <td colSpan={4}>Total: {total}</td>
+                                </tr>
+                            </tfoot>
+                        </table>
+                    )
+                }
+            />
+        </ListBase>
+    </CoreAdminContext>
+);
+
+const foreverLoadingDataProvider = {
+    ...dataProvider,
+    getList: _resource => new Promise(() => {}),
+} as any;
+
+export const Loading = () => (
+    <CoreAdminContext dataProvider={foreverLoadingDataProvider}>
+        <ListBase resource="fruits" disableSyncWithLocation perPage={100}>
+            <WithListContext<Fruit>
+                loading={<>Loading...</>}
+                render={({ data, total }) => (
+                    <table style={{ borderSpacing: '30px 5px' }}>
+                        <thead>
+                            <tr>
+                                <th>Date</th>
+                                <th>Apples</th>
+                                <th>Blueberries</th>
+                                <th>Carrots</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {data.map(fruit => (
+                                <tr key={fruit.id}>
+                                    <td>{fruit.date}</td>
+                                    <td>{fruit.apples}</td>
+                                    <td>{fruit.blueberries}</td>
+                                    <td>{fruit.carrots}</td>
+                                </tr>
+                            ))}
+                        </tbody>
+                        <tfoot>
+                            <tr>
+                                <td colSpan={4}>Total: {total}</td>
+                            </tr>
+                        </tfoot>
+                    </table>
+                )}
+            />
+        </ListBase>
+    </CoreAdminContext>
+);
+
+const erroredDataProvider = {
+    ...dataProvider,
+    getList: _resource => Promise.reject('Error'),
+} as any;
+
+export const Error = () => (
+    <CoreAdminContext dataProvider={erroredDataProvider}>
+        <ListBase resource="fruits" disableSyncWithLocation perPage={100}>
+            <WithListContext<Fruit>
+                error={<p>Error</p>}
+                render={({ isPending, data, total }) =>
+                    isPending ? (
+                        <>Loading...</>
+                    ) : (
+                        <table style={{ borderSpacing: '30px 5px' }}>
+                            <thead>
+                                <tr>
+                                    <th>Date</th>
+                                    <th>Apples</th>
+                                    <th>Blueberries</th>
+                                    <th>Carrots</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {data.map(fruit => (
+                                    <tr key={fruit.id}>
+                                        <td>{fruit.date}</td>
+                                        <td>{fruit.apples}</td>
+                                        <td>{fruit.blueberries}</td>
+                                        <td>{fruit.carrots}</td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                            <tfoot>
+                                <tr>
+                                    <td colSpan={4}>Total: {total}</td>
+                                </tr>
+                            </tfoot>
+                        </table>
+                    )
+                }
+            />
+        </ListBase>
+    </CoreAdminContext>
+);

packages/ra-core/src/controller/list/WithListContext.tsx

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import React, { ReactElement } from 'react';
 import { RaRecord } from '../../types';
 import { ListControllerResult } from './useListController';
 import { useListContext } from './useListContext';
@@ -20,15 +20,37 @@ import { useListContext } from './useListContext';
  * );
  */
 export const WithListContext = <RecordType extends RaRecord>({
+    empty,
+    loading,
+    error: errorElement,
     render,
-}: WithListContextProps<RecordType>) =>
-    render(useListContext<RecordType>()) || null;
+}: WithListContextProps<RecordType>) => {
+    const context = useListContext<RecordType>();
+    const { data, total, isPending, error } = context;
+
+    if (isPending === true) {
+        return loading ? loading : null;
+    }
+
+    if (error) {
+        return errorElement ? errorElement : null;
+    }
+
+    if (data == null || data.length === 0 || total === 0) {
+        return empty ? empty : null;
+    }
+
+    return render(context) || null;
+};
 
 export interface WithListContextProps<RecordType extends RaRecord> {
     render: (
         context: ListControllerResult<RecordType>
     ) => ReactElement | false | null;
     label?: string;
+    empty?: React.ReactElement;
+    loading?: React.ReactElement;
+    error?: React.ReactElement;
 }
 
 /**