Add tests for ListBase render prop and emptyWhileLoading

Author: djhi

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

@@ -4,6 +4,7 @@ import {
     AccessControl,
     DefaultTitle,
     EmptyWhileLoading,
+    EmptyWhileLoadingRender,
     NoAuthProvider,
     Offline,
     WithAuthProviderNoAccessControl,
@@ -171,4 +172,10 @@ describe('ListBase', () => {
         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('War and Peace')).toBeNull();
+        fireEvent.click(screen.getByText('Resolve books loading'));
+        await screen.findByText('War and Peace');
+    });
 });

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

@@ -467,6 +467,46 @@ export const EmptyWhileLoading = () => {
     );
 };
 
+export const EmptyWhileLoadingRender = () => {
+    let resolveGetList: (() => void) | null = null;
+    const baseProvider = defaultDataProvider(0);
+    const dataProvider = {
+        ...baseProvider,
+        getList: (resource, params) => {
+            return new Promise<GetListResult>(resolve => {
+                resolveGetList = () =>
+                    resolve(baseProvider.getList(resource, params));
+            });
+        },
+    };
+
+    return (
+        <CoreAdminContext dataProvider={dataProvider}>
+            <button
+                onClick={() => {
+                    resolveGetList && resolveGetList();
+                }}
+            >
+                Resolve books loading
+            </button>
+            <ListBase
+                resource="books"
+                perPage={5}
+                emptyWhileLoading
+                render={({ data }) => {
+                    return (
+                        <ul>
+                            {data.map((record: any) => (
+                                <li key={record.id}>{record.title}</li>
+                            ))}
+                        </ul>
+                    );
+                }}
+            />
+        </CoreAdminContext>
+    );
+};
+
 const Title = () => {
     const { defaultTitle } = useListContext();
     const [locale, setLocale] = useLocaleState();

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

@@ -79,7 +79,7 @@ export const ListBase = <RecordType extends RaRecord = any>({
         offline !== undefined &&
         offline !== false;
 
-    const showEmpty = isPending && !showOffline && emptyWhileLoading;
+    const showEmpty = isPending && !showOffline && emptyWhileLoading === true;
 
     return (
         // We pass props.resource here as we don't need to create a new ResourceContext if the props is not provided