Add offline support to reference components

Author: djhi

packages/ra-ui-materialui/src/field/ReferenceManyCount.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import {
     useReferenceManyFieldController,
     useRecordContext,
@@ -37,6 +37,7 @@ export const ReferenceManyCount = <RecordType extends RaRecord = RaRecord>(
         filter,
         sort,
         link,
+        offline,
         resource,
         source = 'id',
         timeout = 1000,
@@ -46,31 +47,44 @@ export const ReferenceManyCount = <RecordType extends RaRecord = RaRecord>(
     const oneSecondHasPassed = useTimeout(timeout);
     const createPath = useCreatePath();
 
-    const { isPending, error, total } =
+    const { isPaused, isPending, error, total } =
         useReferenceManyFieldController<RecordType>({
             filter,
             sort,
             page: 1,
             perPage: 1,
             record,
             reference,
-            // @ts-ignore remove when #8491 is released
             resource,
             source,
             target,
         });
 
-    const body = isPending ? (
-        oneSecondHasPassed ? (
-            <CircularProgress size={14} />
-        ) : (
-            ''
-        )
-    ) : error ? (
-        <ErrorIcon color="error" fontSize="small" titleAccess="error" />
-    ) : (
-        total
-    );
+    let body: ReactNode = total;
+
+    if (isPaused && total == null) {
+        body = offline ?? (
+            <ErrorIcon
+                color="error"
+                fontSize="small"
+                titleAccess="ra.notification.offline"
+            />
+        );
+    }
+
+    if (isPending && !isPaused && oneSecondHasPassed) {
+        body = <CircularProgress size={14} />;
+    }
+
+    if (error) {
+        body = (
+            <ErrorIcon
+                color="error"
+                fontSize="small"
+                titleAccess={error.message}
+            />
+        );
+    }
 
     return link && record ? (
         <Link
@@ -104,6 +118,7 @@ ReferenceManyCount.textAlign = 'right';
 export interface ReferenceManyCountProps<RecordType extends RaRecord = RaRecord>
     extends Omit<FieldProps<RecordType>, 'source'>,
         Omit<TypographyProps, 'textAlign'> {
+    offline?: ReactNode;
     reference: string;
     source?: string;
     target: string;

packages/ra-ui-materialui/src/field/ReferenceOneField.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, ReactNode, useMemo } from 'react';
+import React, { ReactNode, useMemo } from 'react';
 import { UseQueryOptions } from '@tanstack/react-query';
 import { Typography } from '@mui/material';
 import {
@@ -40,6 +40,7 @@ export const ReferenceOneField = <
         source = 'id',
         target,
         emptyText,
+        offline: offlineProp = 'ra-references.single_offline',
         sort,
         filter,
         link,
@@ -83,11 +84,32 @@ export const ReferenceOneField = <
             emptyText
         ) : null;
 
-    return !record ||
+    const offline =
+        typeof offlineProp === 'string' ? (
+            <Typography component="span" variant="body2">
+                {offlineProp && translate(offlineProp, { _: offlineProp })}
+            </Typography>
+        ) : offlineProp ? (
+            offlineProp
+        ) : null;
+
+    if (
+        !record ||
         (!controllerProps.isPending &&
-            controllerProps.referenceRecord == null) ? (
-        empty
-    ) : (
+            !controllerProps.isPaused &&
+            controllerProps.referenceRecord == null)
+    ) {
+        return empty;
+    }
+
+    if (
+        !record ||
+        (controllerProps.isPaused && controllerProps.referenceRecord == null)
+    ) {
+        return offline;
+    }
+
+    return (
         <ResourceContextProvider value={reference}>
             <ReferenceFieldContextProvider value={context}>
                 <RecordContextProvider value={context.referenceRecord}>
@@ -111,7 +133,8 @@ export interface ReferenceOneFieldProps<
     source?: string;
     filter?: any;
     link?: LinkToType<ReferenceRecordType>;
-    emptyText?: string | ReactElement;
+    emptyText?: ReactNode;
+    offline?: ReactNode;
     queryOptions?: Omit<
         UseQueryOptions<{
             data: ReferenceRecordType[];