Merge branch 'develop' into issue-1275

package.json

@@ -48,7 +48,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

@@ -7451,10 +7451,35 @@ 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"
+  integrity sha512-84Ivxmr17KjUupyqzFode6xKhjwuEJDROWKJy/BthkL7Wn6NJ8h4WE6k/exAv6ImS+0oZLRRW5j/aINMHyeGeQ==
+  dependencies:
+    "@babel/code-frame" "^7.16.0"
+    address "^1.1.2"
+    browserslist "^4.18.1"
+    chalk "^4.1.2"
+    cross-spawn "^7.0.3"
+    detect-port-alt "^1.1.6"
+    escape-string-regexp "^4.0.0"
+    filesize "^8.0.6"
+    find-up "^5.0.0"
+    fork-ts-checker-webpack-plugin "^6.5.0"
+    global-modules "^2.0.0"
+    globby "^11.0.4"
+    gzip-size "^6.0.0"
+    immer "^9.0.7"
+    is-root "^2.1.0"
+    loader-utils "^3.2.0"
+    open "^8.4.0"
+    pkg-up "^3.1.0"
+    prompts "^2.4.2"
+    react-error-overlay "^6.0.11"
+    recursive-readdir "^2.2.2"
+    shell-quote "^1.7.3"
+    strip-ansi "^6.0.1"
+    text-table "^0.2.0"
 
 react-div-100vh@*, react-div-100vh@^0.7.0:
   version "0.7.0"