Improve offline detection in Edit, Show, ReferenceField and ReferenceOneField

Author: djhi

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

@@ -422,6 +422,8 @@ describe('EditBase', () => {
             screen.queryByText('You are offline, cannot load data')
         ).toBeNull();
         rerender(<Offline isOnline={false} />);
+        // Ensure the data is still displayed when going offline after it was loaded
         await screen.findByText('You are offline, the data may be outdated');
+        await screen.findByText('Hello');
     });
 });

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

@@ -198,7 +198,11 @@ export const Offline = ({
                 {...defaultProps}
                 {...props}
                 mutationMode="pessimistic"
-                offline={<p>You are offline, cannot load data</p>}
+                offline={
+                    <p style={{ color: 'orange' }}>
+                        You are offline, cannot load data
+                    </p>
+                }
             >
                 <OfflineChild />
             </EditBase>

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

@@ -61,7 +61,7 @@ export const EditBase = <RecordType extends RaRecord = any, ErrorType = Error>({
         );
     }
 
-    const { isPaused, record } = controllerProps;
+    const { isPaused, isPending } = controllerProps;
 
     const shouldRenderLoading =
         isAuthPending &&
@@ -70,7 +70,7 @@ export const EditBase = <RecordType extends RaRecord = any, ErrorType = Error>({
         loading !== undefined;
 
     const shouldRenderOffline =
-        isPaused && !record && offline !== false && offline !== undefined;
+        isPaused && isPending && offline !== false && offline !== undefined;
 
     return (
         // We pass props.resource here as we don't need to create a new ResourceContext if the props is not provided

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

@@ -175,5 +175,9 @@ describe('<ReferenceFieldBase />', () => {
         await screen.findByText('You are offline, cannot load data');
         fireEvent.click(await screen.findByText('Simulate online'));
         await screen.findByText('Leo');
+        fireEvent.click(await screen.findByText('Simulate offline'));
+        // Ensure the data is still displayed when going offline after it was loaded
+        await screen.findByText('You are offline, the data may be outdated');
+        await screen.findByText('Leo');
     });
 });

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

@@ -10,6 +10,7 @@ import { useFieldValue } from '../../util/useFieldValue';
 import { useReferenceFieldContext } from './ReferenceFieldContext';
 import { DataProvider } from '../../types';
 import { useIsOffline } from '../../core/useIsOffline';
+import { IsOffline } from '../..';
 
 export default {
     title: 'ra-core/controller/field/ReferenceFieldBase',
@@ -422,13 +423,19 @@ export const Offline = () => {
                                         source="author"
                                         reference="authors"
                                         offline={
-                                            <p>
+                                            <p style={{ color: 'orange' }}>
                                                 You are offline, cannot load
                                                 data
                                             </p>
                                         }
                                     >
                                         <MyReferenceField>
+                                            <IsOffline>
+                                                <p style={{ color: 'orange' }}>
+                                                    You are offline, the data
+                                                    may be outdated
+                                                </p>
+                                            </IsOffline>
                                             <TextField source="first_name" />
                                         </MyReferenceField>
                                     </ReferenceFieldBase>

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

@@ -72,10 +72,7 @@ export const ReferenceFieldBase = <
         loading !== false &&
         loading !== undefined;
     const shouldRenderOffline =
-        isPaused &&
-        !referenceRecord &&
-        offline !== false &&
-        offline !== undefined;
+        isPaused && isPending && offline !== false && offline !== undefined;
     const shouldRenderError =
         !!controllerError && error !== false && error !== undefined;
     const shouldRenderEmpty =

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

@@ -67,8 +67,12 @@ describe('ReferenceOneFieldBase', () => {
         render(<Offline />);
         fireEvent.click(await screen.findByText('Simulate offline'));
         fireEvent.click(await screen.findByText('Toggle Child'));
-        await screen.findByText('Offline');
+        await screen.findByText('You are offline, cannot load data');
         fireEvent.click(await screen.findByText('Simulate online'));
         await screen.findByText('9780393966473');
+        fireEvent.click(await screen.findByText('Simulate offline'));
+        // Ensure the data is still displayed when going offline after it was loaded
+        await screen.findByText('You are offline, the data may be outdated');
+        await screen.findByText('9780393966473');
     });
 });

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import {
     CoreAdminContext,
+    IsOffline,
     RecordContextProvider,
     ReferenceOneFieldBase,
     ResourceContextProvider,
@@ -111,8 +112,17 @@ export const Offline = () => {
                     <ReferenceOneFieldBase
                         reference="book_details"
                         target="book_id"
-                        offline={<span>Offline</span>}
+                        offline={
+                            <span style={{ color: 'orange' }}>
+                                You are offline, cannot load data
+                            </span>
+                        }
                     >
+                        <IsOffline>
+                            <p style={{ color: 'orange' }}>
+                                You are offline, the data may be outdated
+                            </p>
+                        </IsOffline>
                         <BookDetails />
                     </ReferenceOneFieldBase>
                 </RenderChildOnDemand>

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

@@ -89,10 +89,7 @@ export const ReferenceOneFieldBase = <
     const shouldRenderLoading =
         !isPaused && isPending && loading !== false && loading !== undefined;
     const shouldRenderOffline =
-        isPaused &&
-        !referenceRecord &&
-        offline !== false &&
-        offline !== undefined;
+        isPaused && isPending && offline !== false && offline !== undefined;
     const shouldRenderError =
         !!controllerError && error !== false && error !== undefined;
     const shouldRenderEmpty =

packages/ra-core/src/controller/show/ShowBase.spec.tsx

@@ -130,5 +130,8 @@ describe('ShowBase', () => {
         ).toBeNull();
         rerender(<Offline isOnline={false} />);
         await screen.findByText('You are offline, the data may be outdated');
+        // Ensure the data is still displayed when going offline after it was loaded
+        await screen.findByText('You are offline, the data may be outdated');
+        await screen.findByText('Hello');
     });
 });