fix offline indicator

src/components/TableToolbar/LoadedRowsStatus.tsx

@@ -12,6 +12,7 @@ import {
   serverDocCountAtom,
 } from "@src/atoms/tableScope";
 import { spreadSx } from "@src/utils/ui";
+import useOffline from "@src/hooks/useOffline";
 
 const StatusText = forwardRef(function StatusText(
   props: TypographyProps,
@@ -77,13 +78,8 @@ function LoadedRowsStatus() {
 }
 
 export default function SuspendedLoadedRowsStatus() {
-  if (navigator.onLine) {
-    return (
-      <Suspense fallback={<StatusText>{loadingIcon}Loading…</StatusText>}>
-        <LoadedRowsStatus />
-      </Suspense>
-    );
-  } else {
+  const isOffline = useOffline();
+  if (isOffline) {
     return (
       <Tooltip title="Changes will be saved when you reconnect" describeChild>
         <StatusText color="error.main">
@@ -92,5 +88,11 @@ export default function SuspendedLoadedRowsStatus() {
         </StatusText>
       </Tooltip>
     );
+  } else {
+    return (
+      <Suspense fallback={<StatusText>{loadingIcon}Loading…</StatusText>}>
+        <LoadedRowsStatus />
+      </Suspense>
+    );
   }
 }

src/hooks/useOffline.ts

@@ -5,10 +5,24 @@ export default function useOffline() {
   const handleOffline = () => setIsOffline(true);
   const handleOnline = () => setIsOffline(false);
 
+  const checkOnlineStatus = async () => {
+    try {
+      const res = await fetch("https://httpbin.org/get", { cache: "no-store" });
+      if (res.status >= 200 && res.status < 300) {
+        handleOnline();
+      } else {
+        handleOffline();
+      }
+    } catch (error) {
+      handleOffline();
+    }
+  };
   useEffect(() => {
     // Need to set here because the listener doesn’t fire on initial load
     setIsOffline(!window.navigator.onLine);
-
+    if (!window.navigator.onLine) {
+      checkOnlineStatus();
+    }
     window.addEventListener("offline", handleOffline);
     window.addEventListener("online", handleOnline);