diff --git a/docs/ReferenceField.md b/docs/ReferenceField.md
index 82bd610dbef..1edfdce7dd6 100644
--- a/docs/ReferenceField.md
+++ b/docs/ReferenceField.md
@@ -79,6 +79,7 @@ It uses `dataProvider.getMany()` instead of `dataProvider.getOne()` [for perform
 | `empty`     | Optional | `ReactNode`         | -        | What to render when the field has no value or when the reference is missing |
 | `label`     | Optional | `string | Function` | `resources. [resource]. fields.[source]`   | Label to use for the field when rendered in layout components  |
 | `link`      | Optional | `string | Function` | `edit`   | Target of the link wrapping the rendered child. Set to `false` to disable the link. |
+| `offline`   | Optional | `ReactNode`         | -        | What to render when there is no network connectivity when loading the record |
 | `queryOptions`     | Optional | [`UseQuery Options`](https://tanstack.com/query/v5/docs/react/reference/useQuery)                       | `{}`                             | `react-query` client options                                                                   |
 | `sortBy`    | Optional | `string | Function` | `source` | Name of the field to use for sorting when used in a Datagrid |
 
@@ -98,6 +99,7 @@ By default, `<ReferenceField>` renders the `recordRepresentation` of the referen
 ```
 
 Alternatively, you can use [the `render` prop](#render) to render the referenced record in a custom way. 
+
 ## `empty`
 
 `<ReferenceField>` can display a custom message when the referenced record is missing, thanks to the `empty` prop.
@@ -172,6 +174,21 @@ You can also use a custom `link` function to get a custom path for the children.
 />
 ```
 
+## `offline`
+
+When the user is offline, `<ReferenceField>` is smart enough to display the referenced record if it was previously fetched. However, if the referenced record has never been fetched before, `<ReferenceField>` displays an error message explaining that the app has lost network connectivity.
+
+You can customize this error message by passing a React element or a string to the `offline` prop:
+
+```jsx
+<ReferenceField source="user_id" reference="users" offline={<span>No network, could not fetch data</span>} >
+    ...
+</ReferenceField>
+<ReferenceField source="user_id" reference="users" offline="No network, could not fetch data" >
+    ...
+</ReferenceField>
+```
+
 ## `queryOptions`
 
 Use the `queryOptions` prop to pass options to [the `dataProvider.getMany()` query](./useGetOne.md#aggregating-getone-calls) that fetches the referenced record.
diff --git a/docs/ReferenceFieldBase.md b/docs/ReferenceFieldBase.md
index d2c7695092e..a4ead74962b 100644
--- a/docs/ReferenceFieldBase.md
+++ b/docs/ReferenceFieldBase.md
@@ -68,6 +68,7 @@ It uses `dataProvider.getMany()` instead of `dataProvider.getOne()` [for perform
 | `children`  | Optional | `ReactNode`         | -        | React component to render the referenced record. |
 | `render`  | Optional |  `(context) => ReactNode`         | -        | Function that takes the referenceFieldContext and renders the referenced record. |
 | `empty`     | Optional | `ReactNode`         | -        | What to render when the field has no value or when the reference is missing |
+| `offline`   | Optional | `ReactNode`         | -        | What to render when there is no network connectivity when loading the record |
 | `queryOptions`     | Optional | [`UseQuery Options`](https://tanstack.com/query/v5/docs/react/reference/useQuery)                       | `{}`                             | `react-query` client options                                                                   |
 | `sortBy`    | Optional | `string | Function` | `source` | Name of the field to use for sorting when used in a Datagrid |
 
@@ -100,35 +101,6 @@ export const MyReferenceField = () => (
 );
 ```
 
-## `render`
-
-Alternatively, you can pass a `render` function prop instead of children. This function will receive the `ReferenceFieldContext` as argument.
-
-```jsx
-export const MyReferenceField = () => (
-    <ReferenceFieldBase
-        source="user_id"
-        reference="users"
-        render={({ error, isPending, referenceRecord }) => {
-            if (isPending) {
-                return <p>Loading...</p>;
-            }
-
-            if (error) {
-                return (
-                    <p className="error">
-                        {error.message}
-                    </p>
-                );
-            }
-            return <p>{referenceRecord.name}</p>;
-        }}
-    />
-);
-```
-
-The `render` function prop will take priority on `children` props if both are set.
-
 ## `empty`
 
 `<ReferenceFieldBase>` can display a custom message when the referenced record is missing, thanks to the `empty` prop.
@@ -155,6 +127,21 @@ You can pass either a React element or a string to the `empty` prop:
 </ReferenceFieldBase>
 ```
 
+## `offline`
+
+When the user is offline, `<ReferenceFieldBase>` is smart enough to display the referenced record if it was previously fetched. However, if the referenced record has never been fetched before, `<ReferenceFieldBase>` displays an error message explaining that the app has lost network connectivity.
+
+You can customize this error message by passing a React element or a string to the `offline` prop:
+
+```jsx
+<ReferenceFieldBase source="user_id" reference="users" offline={<span>No network, could not fetch data</span>} >
+    ...
+</ReferenceFieldBase>
+<ReferenceFieldBase source="user_id" reference="users" offline="No network, could not fetch data" >
+    ...
+</ReferenceFieldBase>
+```
+
 ## `queryOptions`
 
 Use the `queryOptions` prop to pass options to [the `dataProvider.getMany()` query](./useGetOne.md#aggregating-getone-calls) that fetches the referenced record.
@@ -186,6 +173,36 @@ For instance, if the `posts` resource has a `user_id` field, set the `reference`
 </ReferenceFieldBase>
 ```
 
+
+## `render`
+
+Alternatively, you can pass a `render` function prop instead of children. This function will receive the `ReferenceFieldContext` as argument.
+
+```jsx
+export const MyReferenceField = () => (
+    <ReferenceFieldBase
+        source="user_id"
+        reference="users"
+        render={({ error, isPending, referenceRecord }) => {
+            if (isPending) {
+                return <p>Loading...</p>;
+            }
+
+            if (error) {
+                return (
+                    <p className="error">
+                        {error.message}
+                    </p>
+                );
+            }
+            return <p>{referenceRecord.name}</p>;
+        }}
+    />
+);
+```
+
+The `render` function prop will take priority on `children` props if both are set.
+
 ## `sortBy`
 
 By default, when used in a `<Datagrid>`, and when the user clicks on the column header of a `<ReferenceFieldBase>`, react-admin sorts the list by the field `source`. To specify another field name to sort by, set the `sortBy` prop.
diff --git a/packages/ra-core/src/controller/field/ReferenceFieldBase.spec.tsx b/packages/ra-core/src/controller/field/ReferenceFieldBase.spec.tsx
index 9ee4ae816b5..98adc484e4c 100644
--- a/packages/ra-core/src/controller/field/ReferenceFieldBase.spec.tsx
+++ b/packages/ra-core/src/controller/field/ReferenceFieldBase.spec.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import expect from 'expect';
-import { render, screen, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { CoreAdminContext } from '../../core/CoreAdminContext';
 import { useResourceContext } from '../../core/useResourceContext';
 import { testDataProvider } from '../../dataProvider';
@@ -10,8 +10,10 @@ import {
     Errored,
     Loading,
     Meta,
+    Offline,
     WithRenderProp,
 } from './ReferenceFieldBase.stories';
+import { RecordContextProvider } from '../record';
 
 describe('<ReferenceFieldBase />', () => {
     beforeAll(() => {
@@ -46,20 +48,20 @@ describe('<ReferenceFieldBase />', () => {
             return <div>{resource}</div>;
         };
         const dataProvider = testDataProvider({
-            // @ts-ignore
-            getList: () =>
+            getMany: () =>
+                // @ts-ignore
                 Promise.resolve({ data: [{ id: 1 }, { id: 2 }], total: 2 }),
         });
         render(
             <CoreAdminContext dataProvider={dataProvider}>
-                <ReferenceFieldBase reference="posts" source="post_id">
-                    <MyComponent />
-                </ReferenceFieldBase>
+                <RecordContextProvider value={{ post_id: 1 }}>
+                    <ReferenceFieldBase reference="posts" source="post_id">
+                        <MyComponent />
+                    </ReferenceFieldBase>
+                </RecordContextProvider>
             </CoreAdminContext>
         );
-        await waitFor(() => {
-            expect(screen.queryByText('posts')).not.toBeNull();
-        });
+        await screen.findByText('posts');
     });
 
     it('should accept meta in queryOptions', async () => {
@@ -70,8 +72,8 @@ describe('<ReferenceFieldBase />', () => {
             );
         const dataProvider = testDataProvider({
             getMany,
-            // @ts-ignore
             getOne: () =>
+                // @ts-ignore
                 Promise.resolve({
                     data: {
                         id: 1,
@@ -165,4 +167,13 @@ describe('<ReferenceFieldBase />', () => {
             });
         });
     });
+
+    it('should render the offline prop node when offline', async () => {
+        render(<Offline />);
+        fireEvent.click(await screen.findByText('Simulate offline'));
+        fireEvent.click(await screen.findByText('Toggle Child'));
+        await screen.findByText('You are offline, cannot load data');
+        fireEvent.click(await screen.findByText('Simulate online'));
+        await screen.findByText('Leo');
+    });
 });
diff --git a/packages/ra-core/src/controller/field/ReferenceFieldBase.stories.tsx b/packages/ra-core/src/controller/field/ReferenceFieldBase.stories.tsx
index 168f35c0909..5a789ed1fa6 100644
--- a/packages/ra-core/src/controller/field/ReferenceFieldBase.stories.tsx
+++ b/packages/ra-core/src/controller/field/ReferenceFieldBase.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { QueryClient } from '@tanstack/react-query';
+import { onlineManager, QueryClient } from '@tanstack/react-query';
 import fakeRestDataProvider from 'ra-data-fakerest';
 import { CoreAdmin } from '../../core/CoreAdmin';
 import { Resource } from '../../core/Resource';
@@ -9,6 +9,7 @@ import { ReferenceFieldBase } from './ReferenceFieldBase';
 import { useFieldValue } from '../../util/useFieldValue';
 import { useReferenceFieldContext } from './ReferenceFieldContext';
 import { DataProvider } from '../../types';
+import { useIsOffline } from '../../core/useIsOffline';
 
 export default {
     title: 'ra-core/controller/field/ReferenceFieldBase',
@@ -395,6 +396,77 @@ export const WithRenderProp = ({ dataProvider = dataProviderWithAuthors }) => (
     </TestMemoryRouter>
 );
 
+export const Offline = () => {
+    return (
+        <TestMemoryRouter initialEntries={['/books/1/show']}>
+            <CoreAdmin
+                dataProvider={dataProviderWithAuthors}
+                queryClient={
+                    new QueryClient({
+                        defaultOptions: {
+                            queries: {
+                                retry: false,
+                            },
+                        },
+                    })
+                }
+            >
+                <Resource name="authors" />
+                <Resource
+                    name="books"
+                    show={
+                        <ShowBase>
+                            <div>
+                                <RenderChildOnDemand>
+                                    <ReferenceFieldBase
+                                        source="author"
+                                        reference="authors"
+                                        offline={
+                                            <p>
+                                                You are offline, cannot load
+                                                data
+                                            </p>
+                                        }
+                                    >
+                                        <MyReferenceField>
+                                            <TextField source="first_name" />
+                                        </MyReferenceField>
+                                    </ReferenceFieldBase>
+                                </RenderChildOnDemand>
+                            </div>
+                            <SimulateOfflineButton />
+                        </ShowBase>
+                    }
+                />
+            </CoreAdmin>
+        </TestMemoryRouter>
+    );
+};
+
+const SimulateOfflineButton = () => {
+    const isOffline = useIsOffline();
+    return (
+        <button
+            type="button"
+            onClick={() => onlineManager.setOnline(isOffline)}
+        >
+            {isOffline ? 'Simulate online' : 'Simulate offline'}
+        </button>
+    );
+};
+
+const RenderChildOnDemand = ({ children }) => {
+    const [showChild, setShowChild] = React.useState(false);
+    return (
+        <>
+            <button onClick={() => setShowChild(!showChild)}>
+                Toggle Child
+            </button>
+            {showChild && <div>{children}</div>}
+        </>
+    );
+};
+
 const MyReferenceField = (props: { children: React.ReactNode }) => {
     const context = useReferenceFieldContext();
 
diff --git a/packages/ra-core/src/controller/field/ReferenceFieldBase.tsx b/packages/ra-core/src/controller/field/ReferenceFieldBase.tsx
index 8a43db5087c..3a92f14698a 100644
--- a/packages/ra-core/src/controller/field/ReferenceFieldBase.tsx
+++ b/packages/ra-core/src/controller/field/ReferenceFieldBase.tsx
@@ -47,7 +47,7 @@ export const ReferenceFieldBase = <
 >(
     props: ReferenceFieldBaseProps<ReferenceRecordType>
 ) => {
-    const { children, render, loading, error, empty = null } = props;
+    const { children, render, loading, error, empty, offline } = props;
     const id = useFieldValue(props);
 
     const controllerProps =
@@ -59,43 +59,48 @@ export const ReferenceFieldBase = <
         );
     }
 
-    if (controllerProps.isPending && loading) {
-        return (
-            <ResourceContextProvider value={props.reference}>
-                {loading}
-            </ResourceContextProvider>
-        );
-    }
-    if (controllerProps.error && error) {
-        return (
-            <ResourceContextProvider value={props.reference}>
-                <ReferenceFieldContextProvider value={controllerProps}>
-                    {error}
-                </ReferenceFieldContextProvider>
-            </ResourceContextProvider>
-        );
-    }
-    if (
-        (empty &&
-            // no foreign key value
-            !id) ||
-        // no reference record
-        (!controllerProps.error &&
-            !controllerProps.isPending &&
-            !controllerProps.referenceRecord)
-    ) {
-        return (
-            <ResourceContextProvider value={props.reference}>
-                {empty}
-            </ResourceContextProvider>
-        );
-    }
-
+    const {
+        error: controllerError,
+        isPending,
+        isPaused,
+        referenceRecord,
+    } = controllerProps;
+    const shouldRenderLoading =
+        id != null &&
+        !isPaused &&
+        isPending &&
+        loading !== false &&
+        loading !== undefined;
+    const shouldRenderOffline =
+        isPaused &&
+        !referenceRecord &&
+        offline !== false &&
+        offline !== undefined;
+    const shouldRenderError =
+        !!controllerError && error !== false && error !== undefined;
+    const shouldRenderEmpty =
+        !isPaused &&
+        (!id ||
+            (!referenceRecord &&
+                !controllerError &&
+                !isPending &&
+                empty !== false &&
+                empty !== undefined));
     return (
         <ResourceContextProvider value={props.reference}>
             <ReferenceFieldContextProvider value={controllerProps}>
-                <RecordContextProvider value={controllerProps.referenceRecord}>
-                    {render ? render(controllerProps) : children}
+                <RecordContextProvider value={referenceRecord}>
+                    {shouldRenderLoading
+                        ? loading
+                        : shouldRenderOffline
+                          ? offline
+                          : shouldRenderError
+                            ? error
+                            : shouldRenderEmpty
+                              ? empty
+                              : render
+                                ? render(controllerProps)
+                                : children}
                 </RecordContextProvider>
             </ReferenceFieldContextProvider>
         </ResourceContextProvider>
@@ -113,6 +118,7 @@ export interface ReferenceFieldBaseProps<
     empty?: ReactNode;
     error?: ReactNode;
     loading?: ReactNode;
+    offline?: ReactNode;
     queryOptions?: Partial<
         UseQueryOptions<ReferenceRecordType[], Error> & {
             meta?: any;
diff --git a/packages/ra-core/src/controller/field/useReferenceOneFieldController.tsx b/packages/ra-core/src/controller/field/useReferenceOneFieldController.tsx
index fbba23a4106..7a17987637a 100644
--- a/packages/ra-core/src/controller/field/useReferenceOneFieldController.tsx
+++ b/packages/ra-core/src/controller/field/useReferenceOneFieldController.tsx
@@ -76,47 +76,57 @@ export const useReferenceOneFieldController = <
     const notify = useNotify();
     const { meta, ...otherQueryOptions } = queryOptions;
 
-    const { data, error, isFetching, isLoading, isPending, refetch } =
-        useGetManyReference<ReferenceRecordType, ErrorType>(
-            reference,
-            {
-                target,
-                id: get(record, source),
-                pagination: { page: 1, perPage: 1 },
-                sort,
-                filter,
-                meta,
-            },
-            {
-                enabled: !!record,
-                onError: error =>
-                    notify(
-                        typeof error === 'string'
-                            ? error
-                            : (error as Error).message ||
-                                  'ra.notification.http_error',
-                        {
-                            type: 'error',
-                            messageArgs: {
-                                _:
-                                    typeof error === 'string'
-                                        ? error
-                                        : (error as Error)?.message
-                                          ? (error as Error).message
-                                          : undefined,
-                            },
-                        }
-                    ),
-                ...otherQueryOptions,
-            }
-        );
+    const {
+        data,
+        error,
+        isFetching,
+        isLoading,
+        isPaused,
+        isPending,
+        isPlaceholderData,
+        refetch,
+    } = useGetManyReference<ReferenceRecordType, ErrorType>(
+        reference,
+        {
+            target,
+            id: get(record, source),
+            pagination: { page: 1, perPage: 1 },
+            sort,
+            filter,
+            meta,
+        },
+        {
+            enabled: !!record,
+            onError: error =>
+                notify(
+                    typeof error === 'string'
+                        ? error
+                        : (error as Error).message ||
+                              'ra.notification.http_error',
+                    {
+                        type: 'error',
+                        messageArgs: {
+                            _:
+                                typeof error === 'string'
+                                    ? error
+                                    : (error as Error)?.message
+                                      ? (error as Error).message
+                                      : undefined,
+                        },
+                    }
+                ),
+            ...otherQueryOptions,
+        }
+    );
 
     return {
         referenceRecord: data ? data[0] : undefined,
         error,
         isFetching,
         isLoading,
+        isPaused,
         isPending,
+        isPlaceholderData,
         refetch,
     };
 };
diff --git a/packages/ra-core/src/controller/useReference.spec.tsx b/packages/ra-core/src/controller/useReference.spec.tsx
index e8b991c781c..4c233df6335 100644
--- a/packages/ra-core/src/controller/useReference.spec.tsx
+++ b/packages/ra-core/src/controller/useReference.spec.tsx
@@ -130,7 +130,9 @@ describe('useReference', () => {
             referenceRecord: undefined,
             isFetching: true,
             isLoading: true,
+            isPaused: false,
             isPending: true,
+            isPlaceholderData: false,
             error: null,
             refetch: expect.any(Function),
         });
@@ -138,7 +140,9 @@ describe('useReference', () => {
             referenceRecord: { id: 1, title: 'foo' },
             isFetching: false,
             isLoading: false,
+            isPaused: false,
             isPending: false,
+            isPlaceholderData: false,
             error: null,
             refetch: expect.any(Function),
         });
@@ -170,7 +174,9 @@ describe('useReference', () => {
             referenceRecord: { id: 1, title: 'foo' },
             isFetching: true,
             isLoading: false,
+            isPaused: false,
             isPending: false,
+            isPlaceholderData: false,
             error: null,
             refetch: expect.any(Function),
         });
@@ -178,7 +184,9 @@ describe('useReference', () => {
             referenceRecord: { id: 1, title: 'foo' },
             isFetching: false,
             isLoading: false,
+            isPaused: false,
             isPending: false,
+            isPlaceholderData: false,
             error: null,
             refetch: expect.any(Function),
         });
diff --git a/packages/ra-core/src/controller/useReference.ts b/packages/ra-core/src/controller/useReference.ts
index b52526226c9..a6cc7c9a193 100644
--- a/packages/ra-core/src/controller/useReference.ts
+++ b/packages/ra-core/src/controller/useReference.ts
@@ -21,7 +21,9 @@ export interface UseReferenceResult<
     ErrorType = Error,
 > {
     isLoading: boolean;
+    isPaused: boolean;
     isPending: boolean;
+    isPlaceholderData: boolean;
     isFetching: boolean;
     referenceRecord?: RecordType;
     error?: ErrorType | null;
@@ -68,18 +70,28 @@ export const useReference = <
     ErrorType
 > => {
     const { meta, ...otherQueryOptions } = options;
-    const { data, error, isLoading, isFetching, isPending, refetch } =
-        useGetManyAggregate<RecordType, ErrorType>(
-            reference,
-            { ids: [id], meta },
-            otherQueryOptions
-        );
+    const {
+        data,
+        error,
+        isLoading,
+        isFetching,
+        isPaused,
+        isPending,
+        isPlaceholderData,
+        refetch,
+    } = useGetManyAggregate<RecordType, ErrorType>(
+        reference,
+        { ids: [id], meta },
+        otherQueryOptions
+    );
     return {
         referenceRecord: error ? undefined : data ? data[0] : undefined,
         refetch,
         error,
         isLoading,
         isFetching,
+        isPaused,
         isPending,
+        isPlaceholderData,
     };
 };
diff --git a/packages/ra-ui-materialui/src/field/ReferenceField.spec.tsx b/packages/ra-ui-materialui/src/field/ReferenceField.spec.tsx
index 59a60eeee5f..1a08c481125 100644
--- a/packages/ra-ui-materialui/src/field/ReferenceField.spec.tsx
+++ b/packages/ra-ui-materialui/src/field/ReferenceField.spec.tsx
@@ -28,6 +28,7 @@ import {
     SXNoLink,
     SlowAccessControl,
     Themed,
+    Offline,
 } from './ReferenceField.stories';
 import { TextField } from './TextField';
 
@@ -763,4 +764,13 @@ describe('<ReferenceField />', () => {
         render(<Themed />);
         expect(await screen.findByTestId('themed')).toBeDefined();
     });
+
+    it('should render the offline prop node when offline', async () => {
+        render(<Offline />);
+        fireEvent.click(await screen.findByText('Simulate offline'));
+        fireEvent.click(await screen.findByText('Toggle Child'));
+        await screen.findByText('No connectivity. Could not fetch data.');
+        fireEvent.click(await screen.findByText('Simulate online'));
+        await screen.findByText('9780393966473');
+    });
 });
diff --git a/packages/ra-ui-materialui/src/field/ReferenceField.stories.tsx b/packages/ra-ui-materialui/src/field/ReferenceField.stories.tsx
index 36196f3df14..1abd5770274 100644
--- a/packages/ra-ui-materialui/src/field/ReferenceField.stories.tsx
+++ b/packages/ra-ui-materialui/src/field/ReferenceField.stories.tsx
@@ -12,13 +12,14 @@ import {
     Resource,
     TestMemoryRouter,
     AuthProvider,
+    useIsOffline,
 } from 'ra-core';
 
 import fakeRestDataProvider from 'ra-data-fakerest';
 import polyglotI18nProvider from 'ra-i18n-polyglot';
 import englishMessages from 'ra-language-english';
 import { createTheme, Stack, ThemeOptions } from '@mui/material';
-import { QueryClient } from '@tanstack/react-query';
+import { onlineManager, QueryClient } from '@tanstack/react-query';
 import { deepmerge } from '@mui/utils';
 
 import { TextField } from '../field';
@@ -971,3 +972,42 @@ export const WithRenderProp = () => (
         ></ReferenceField>
     </Wrapper>
 );
+
+export const Offline = () => (
+    <Wrapper>
+        <I18nContextProvider value={i18nProvider}>
+            <div>
+                <RenderChildOnDemand>
+                    <ReferenceField source="detail_id" reference="book_details">
+                        <TextField source="ISBN" />
+                    </ReferenceField>
+                </RenderChildOnDemand>
+            </div>
+            <SimulateOfflineButton />
+        </I18nContextProvider>
+    </Wrapper>
+);
+
+const SimulateOfflineButton = () => {
+    const isOffline = useIsOffline();
+    return (
+        <button
+            type="button"
+            onClick={() => onlineManager.setOnline(isOffline)}
+        >
+            {isOffline ? 'Simulate online' : 'Simulate offline'}
+        </button>
+    );
+};
+
+const RenderChildOnDemand = ({ children }) => {
+    const [showChild, setShowChild] = React.useState(false);
+    return (
+        <>
+            <button onClick={() => setShowChild(!showChild)}>
+                Toggle Child
+            </button>
+            {showChild && <div>{children}</div>}
+        </>
+    );
+};
diff --git a/packages/ra-ui-materialui/src/field/ReferenceField.tsx b/packages/ra-ui-materialui/src/field/ReferenceField.tsx
index 7dc22b926e2..f6c73b47448 100644
--- a/packages/ra-ui-materialui/src/field/ReferenceField.tsx
+++ b/packages/ra-ui-materialui/src/field/ReferenceField.tsx
@@ -26,6 +26,7 @@ import { Link } from '../Link';
 import type { FieldProps } from './types';
 import { genericMemo } from './genericMemo';
 import { visuallyHidden } from '@mui/utils';
+import { Offline } from '../Offline';
 
 /**
  * Fetch reference record, and render its representation, or delegate rendering to child component.
@@ -76,7 +77,14 @@ export const ReferenceField = <
         props: inProps,
         name: PREFIX,
     });
-    const { children, render, emptyText, empty, ...rest } = props;
+    const {
+        children,
+        render,
+        emptyText,
+        empty,
+        offline = defaultOffline,
+        ...rest
+    } = props;
     const translate = useTranslate();
 
     return (
@@ -95,6 +103,7 @@ export const ReferenceField = <
                     empty ?? null
                 )
             }
+            offline={offline}
         >
             <PureReferenceFieldView<RecordType, ReferenceRecordType>
                 {...rest}
@@ -106,6 +115,8 @@ export const ReferenceField = <
     );
 };
 
+const defaultOffline = <Offline variant="inline" />;
+
 export interface ReferenceFieldProps<
     RecordType extends Record<string, any> = Record<string, any>,
     ReferenceRecordType extends RaRecord = RaRecord,
@@ -126,6 +137,7 @@ export interface ReferenceFieldProps<
     reference: string;
     translateChoice?: Function | boolean;
     link?: LinkToType<ReferenceRecordType>;
+    offline?: ReactNode;
     sx?: SxProps<Theme>;
 }