Add optional loading, error and empty props to ReferenceBase commponents

Author: fzaninotto

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

@@ -74,6 +74,9 @@ export const ReferenceArrayFieldBase = <
     const {
         children,
         render,
+        error,
+        loading,
+        empty,
         filter,
         page = 1,
         perPage,
@@ -105,6 +108,34 @@ export const ReferenceArrayFieldBase = <
         );
     }
 
+    if (controllerProps.isPending && loading) {
+        return loading;
+    }
+    if (controllerProps.error && error) {
+        return error;
+    }
+    if (
+        // there is an empty page component
+        empty &&
+        // there is no error
+        !controllerProps.error &&
+        // the list is not loading data for the first time
+        !controllerProps.isPending &&
+        // the API returned no data (using either normal or partial pagination)
+        (controllerProps.total === 0 ||
+            (controllerProps.total == null &&
+                // @ts-ignore FIXME total may be undefined when using partial pagination but the ListControllerResult type is wrong about it
+                controllerProps.hasPreviousPage === false &&
+                // @ts-ignore FIXME total may be undefined when using partial pagination but the ListControllerResult type is wrong about it
+                controllerProps.hasNextPage === false &&
+                // @ts-ignore FIXME total may be undefined when using partial pagination but the ListControllerResult type is wrong about it
+                controllerProps.data.length === 0)) &&
+        // the user didn't set any filters
+        !Object.keys(controllerProps.filterValues).length
+    ) {
+        return empty;
+    }
+
     return (
         <ResourceContextProvider value={reference}>
             <ListContextProvider value={controllerProps}>
@@ -120,6 +151,9 @@ export interface ReferenceArrayFieldBaseProps<
 > extends BaseFieldProps<RecordType> {
     children?: ReactNode;
     render?: (props: ListControllerResult<ReferenceRecordType>) => ReactElement;
+    error?: ReactNode;
+    loading?: ReactNode;
+    empty?: ReactNode;
     filter?: FilterPayload;
     page?: number;
     perPage?: number;

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

@@ -47,7 +47,7 @@ export const ReferenceFieldBase = <
 >(
     props: ReferenceFieldBaseProps<ReferenceRecordType>
 ) => {
-    const { children, render, empty = null } = props;
+    const { children, render, loading, error, empty = null } = props;
     const id = useFieldValue(props);
 
     const controllerProps =
@@ -59,6 +59,12 @@ export const ReferenceFieldBase = <
         );
     }
 
+    if (controllerProps.isPending && loading) {
+        return loading;
+    }
+    if (controllerProps.error && error) {
+        return error;
+    }
     if (
         (empty &&
             // no foreign key value
@@ -92,6 +98,7 @@ export interface ReferenceFieldBaseProps<
     className?: string;
     empty?: ReactNode;
     error?: ReactNode;
+    loading?: ReactNode;
     queryOptions?: Partial<
         UseQueryOptions<ReferenceRecordType[], Error> & {
             meta?: any;

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

@@ -65,6 +65,8 @@ export const ReferenceManyFieldBase = <
         render,
         debounce,
         empty,
+        error,
+        loading,
         filter = defaultFilter,
         page = 1,
         perPage = 25,
@@ -96,6 +98,18 @@ export const ReferenceManyFieldBase = <
         queryOptions,
     });
 
+    if (!render && !children) {
+        throw new Error(
+            "<ReferenceManyFieldBase> requires either a 'render' prop or 'children' prop"
+        );
+    }
+
+    if (controllerProps.isPending && loading) {
+        return loading;
+    }
+    if (controllerProps.error && error) {
+        return error;
+    }
     if (
         // there is an empty page component
         empty &&
@@ -118,12 +132,6 @@ export const ReferenceManyFieldBase = <
         return empty;
     }
 
-    if (!render && !children) {
-        throw new Error(
-            "<ReferenceManyFieldBase> requires either a 'render' prop or 'children' prop"
-        );
-    }
-
     return (
         <ResourceContextProvider value={reference}>
             <ListContextProvider value={controllerProps}>
@@ -143,6 +151,8 @@ export interface ReferenceManyFieldBaseProps<
     children?: ReactNode;
     render?: (props: ListControllerResult<ReferenceRecordType>) => ReactNode;
     empty?: ReactNode;
+    error?: ReactNode;
+    loading?: ReactNode;
 }
 
 const defaultFilter = {};

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

@@ -36,6 +36,8 @@ export const ReferenceOneFieldBase = <
         source = 'id',
         target,
         empty,
+        error,
+        loading,
         sort,
         filter,
         link,
@@ -69,20 +71,26 @@ export const ReferenceOneFieldBase = <
         [controllerProps, path]
     );
 
+    if (!render && !children) {
+        throw new Error(
+            "<ReferenceOneFieldBase> requires either a 'render' prop or 'children' prop"
+        );
+    }
+
     const recordFromContext = useRecordContext<RecordType>(props);
+    if (controllerProps.isPending && loading) {
+        return loading;
+    }
+    if (controllerProps.error && error) {
+        return error;
+    }
     if (
         !recordFromContext ||
         (!controllerProps.isPending && controllerProps.referenceRecord == null)
     ) {
         return empty;
     }
 
-    if (!render && !children) {
-        throw new Error(
-            "<ReferenceOneFieldBase> requires either a 'render' prop or 'children' prop"
-        );
-    }
-
     return (
         <ResourceContextProvider value={reference}>
             <ReferenceFieldContextProvider value={context}>
@@ -102,8 +110,10 @@ export interface ReferenceOneFieldBaseProps<
         ReferenceRecordType
     > {
     children?: ReactNode;
+    loading?: ReactNode;
+    error?: ReactNode;
+    empty?: ReactNode;
     render?: (props: UseReferenceResult<ReferenceRecordType>) => ReactNode;
     link?: LinkToType<ReferenceRecordType>;
-    empty?: ReactNode;
     resource?: string;
 }