fix false offline error using navigator.onLine

package.json

@@ -47,7 +47,6 @@
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.0",
     "react-color-palette": "^6.2.0",
-    "react-detect-offline": "^2.4.5",
     "react-div-100vh": "^0.7.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",

src/components/Table/EmptyTable.tsx

@@ -1,5 +1,4 @@
 import { useAtom, useSetAtom } from "jotai";
-import { Offline, Online } from "react-detect-offline";
 
 import { Grid, Stack, Typography, Button, Divider } from "@mui/material";
 import {
@@ -142,36 +141,34 @@ export default function EmptyTable() {
     );
   }
 
-  return (
-    <>
-      <Offline>
-        <EmptyState
-          role="alert"
-          Icon={OfflineIcon}
-          message="You’re offline"
-          description="Go online to view this table’s data"
-          style={{ height: `calc(100vh - ${TOP_BAR_HEIGHT}px)` }}
-        />
-      </Offline>
-
-      <Online>
-        <Stack
-          spacing={3}
-          justifyContent="center"
-          alignItems="center"
-          sx={{
-            height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
-            width: "100%",
-            p: 2,
-            maxWidth: 480,
-            margin: "0 auto",
-            textAlign: "center",
-          }}
-          id="empty-table"
-        >
-          {contents}
-        </Stack>
-      </Online>
-    </>
-  );
+  if (navigator.onLine) {
+    return (
+      <Stack
+        spacing={3}
+        justifyContent="center"
+        alignItems="center"
+        sx={{
+          height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
+          width: "100%",
+          p: 2,
+          maxWidth: 480,
+          margin: "0 auto",
+          textAlign: "center",
+        }}
+        id="empty-table"
+      >
+        {contents}
+      </Stack>
+    );
+  } else {
+    return (
+      <EmptyState
+        role="alert"
+        Icon={OfflineIcon}
+        message="You’re offline"
+        description="Go online to view this table’s data"
+        style={{ height: `calc(100vh - ${TOP_BAR_HEIGHT}px)` }}
+      />
+    );
+  }
 }

src/components/TableToolbar/LoadedRowsStatus.tsx

@@ -1,6 +1,5 @@
 import { Suspense, forwardRef } from "react";
 import { useAtom } from "jotai";
-import { Offline, Online } from "react-detect-offline";
 
 import { Tooltip, Typography, TypographyProps } from "@mui/material";
 import SyncIcon from "@mui/icons-material/Sync";
@@ -78,22 +77,20 @@ function LoadedRowsStatus() {
 }
 
 export default function SuspendedLoadedRowsStatus() {
-  return (
-    <>
-      <Online>
-        <Suspense fallback={<StatusText>{loadingIcon}Loading…</StatusText>}>
-          <LoadedRowsStatus />
-        </Suspense>
-      </Online>
-
-      <Offline>
-        <Tooltip title="Changes will be saved when you reconnect" describeChild>
-          <StatusText color="error.main">
-            <OfflineIcon />
-            Offline
-          </StatusText>
-        </Tooltip>
-      </Offline>
-    </>
-  );
+  if (navigator.onLine) {
+    return (
+      <Suspense fallback={<StatusText>{loadingIcon}Loading…</StatusText>}>
+        <LoadedRowsStatus />
+      </Suspense>
+    );
+  } else {
+    return (
+      <Tooltip title="Changes will be saved when you reconnect" describeChild>
+        <StatusText color="error.main">
+          <OfflineIcon />
+          Offline
+        </StatusText>
+      </Tooltip>
+    );
+  }
 }

yarn.lock

@@ -10381,11 +10381,6 @@ react-color-palette@^6.2.0:
   resolved "https://registry.yarnpkg.com/react-color-palette/-/react-color-palette-6.2.0.tgz#aa3be88f6953d57502c00f4433692129ffbad3e7"
   integrity sha512-9rIboaRJNoeF8aCI2f3J8wgMyhl74SnGmZLDjor3bKf0iDBhP2EBv0/jGmm0hrj6OackGCqtWl5ZvM89XUc3sg==
 
-react-detect-offline@^2.4.5:
-  version "2.4.5"
-  resolved "https://registry.yarnpkg.com/react-detect-offline/-/react-detect-offline-2.4.5.tgz#3c242516c37b6789cf89102881031f87e70b80e6"
-  integrity sha512-sI13NPEKl3uQp95FT5CwrYzH3DnXCwNP6TnY6NRF5gFDM4NU9KDlbtA6HG2dwhDVS0RYQGXwZW/mHbdf8fCnaw==
-
 react-dev-utils@^12.0.1:
   version "12.0.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz#ba92edb4a1f379bd46ccd6bcd4e7bc398df33e73"