Make sure users know about pending operations

Author: djhi

examples/simple/src/Layout.tsx

@@ -6,8 +6,9 @@ import {
     InspectorButton,
     TitlePortal,
     useNotify,
+    useIsOffine,
 } from 'react-admin';
-import { onlineManager, useQueryClient } from '@tanstack/react-query';
+import { useQueryClient } from '@tanstack/react-query';
 import { Stack, Tooltip } from '@mui/material';
 import OfflineIcon from '@mui/icons-material/SignalWifiConnectedNoInternet4';
 import '../assets/app.css';
@@ -48,19 +49,6 @@ export const MyLayout = ({ children }) => (
     </>
 );
 
-const useIsOffine = () => {
-    const [isOnline, setIsOnline] = React.useState(onlineManager.isOnline());
-
-    React.useEffect(() => {
-        const handleChange = () => {
-            setIsOnline(onlineManager.isOnline());
-        };
-        return onlineManager.subscribe(handleChange);
-    }, []);
-
-    return !isOnline;
-};
-
 /**
  * When react-query resumes persisted mutations through their default functions (provided in the getOfflineFirstQueryClient file) after the browser tab
  * has been closed, it cannot handle their side effects unless we set up some defaults. In order to leverage the react-admin notification system

packages/ra-core/src/core/index.ts

@@ -15,6 +15,7 @@ export * from './SourceContext';
 export * from './useFirstResourceWithListAccess';
 export * from './useGetResourceLabel';
 export * from './useGetRecordRepresentation';
+export * from './useIsOffine';
 export * from './useResourceDefinitionContext';
 export * from './useResourceContext';
 export * from './useResourceDefinition';

packages/ra-core/src/core/useIsOffine.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { onlineManager } from '@tanstack/react-query';
+
+/**
+ * Hook to determine if the application is offline.
+ * It uses the onlineManager from react-query to check the online status.
+ * It returns true if the application is offline, false otherwise.
+ * @returns {boolean} - True if offline, false if online.
+ */
+export const useIsOffine = () => {
+    const [isOnline, setIsOnline] = React.useState(onlineManager.isOnline());
+
+    React.useEffect(() => {
+        const handleChange = () => {
+            setIsOnline(onlineManager.isOnline());
+        };
+        return onlineManager.subscribe(handleChange);
+    }, []);
+
+    return !isOnline;
+};

packages/ra-language-english/src/index.ts

@@ -174,6 +174,8 @@ const englishMessages: TranslationMessages = {
             not_authorized: "You're not authorized to access this resource.",
             application_update_available: 'A new version is available.',
             offline: 'No connectivity. Could not fetch data.',
+            pending_operations:
+                'There is a pending operation due to network not being available |||| There are %{smart_count} pending operations due to network not being available',
         },
         validation: {
             required: 'Required',

packages/ra-language-french/src/index.ts

@@ -182,6 +182,8 @@ const frenchMessages: TranslationMessages = {
                 "Vous n'êtes pas autorisé(e) à accéder à cette ressource.",
             application_update_available: 'Une mise à jour est disponible.',
             offline: 'Pas de connexion. Impossible de charger les données.',
+            pending_operations:
+                'Il y a une opération en attente due à un problème de réseau |||| Il y a %{smart_count} opérations en attente dues à un problème de réseau',
         },
         validation: {
             required: 'Ce champ est requis',

packages/ra-ui-materialui/src/layout/LoadingIndicator.tsx

@@ -9,9 +9,11 @@ import {
 } from '@mui/material/styles';
 import clsx from 'clsx';
 import CircularProgress from '@mui/material/CircularProgress';
-import { useLoading } from 'ra-core';
+import { Translate, useIsOffine, useLoading } from 'ra-core';
 
 import { RefreshIconButton, type RefreshIconButtonProps } from '../button';
+import { Badge, Tooltip } from '@mui/material';
+import { useMutationState } from '@tanstack/react-query';
 
 export const LoadingIndicator = (inProps: LoadingIndicatorProps) => {
     const props = useThemeProps({
@@ -20,6 +22,12 @@ export const LoadingIndicator = (inProps: LoadingIndicatorProps) => {
     });
     const { className, onClick, sx, ...rest } = props;
     const loading = useLoading();
+    const isOffline = useIsOffine();
+    const pendingMutations = useMutationState({
+        filters: {
+            status: 'pending',
+        },
+    });
 
     const theme = useTheme();
     return (
@@ -30,18 +38,51 @@ export const LoadingIndicator = (inProps: LoadingIndicatorProps) => {
                 }`}
                 onClick={onClick}
             />
-            {loading && (
-                <CircularProgress
-                    className={clsx(
-                        'app-loader',
-                        LoadingIndicatorClasses.loader
-                    )}
-                    color="inherit"
-                    size={theme.spacing(2)}
-                    thickness={6}
-                    {...rest}
-                />
-            )}
+            {loading ? (
+                isOffline ? (
+                    <Tooltip
+                        title={
+                            <Translate
+                                i18nKey="ra.notifications.pending_operations"
+                                options={{ smart_count: 1 }}
+                            >
+                                {pendingMutations.length > 1
+                                    ? `There are ${pendingMutations.length} pending
+                                operations due to network not being available`
+                                    : `There is a pending operation due to network not being available`}
+                            </Translate>
+                        }
+                    >
+                        <Badge
+                            className={LoadingIndicatorClasses.loader}
+                            badgeContent={pendingMutations.length}
+                            color="primary"
+                        >
+                            <CircularProgress
+                                className={clsx(
+                                    'app-loader',
+                                    LoadingIndicatorClasses.loadedLoading
+                                )}
+                                color="inherit"
+                                size={theme.spacing(2)}
+                                thickness={6}
+                                {...rest}
+                            />
+                        </Badge>
+                    </Tooltip>
+                ) : (
+                    <CircularProgress
+                        className={clsx(
+                            'app-loader',
+                            LoadingIndicatorClasses.loader
+                        )}
+                        color="inherit"
+                        size={theme.spacing(2)}
+                        thickness={6}
+                        {...rest}
+                    />
+                )
+            ) : null}
         </Root>
     );
 };