display offline indicator instead of empty table

src/components/ErrorFallback.tsx

@@ -93,29 +93,40 @@ export function ErrorFallbackContents({
     } else {
       renderProps = {
         Icon: ReloadIcon,
-        message: "New update available",
+        message: "Update available",
         description: (
-          <>
-            <Typography variant="inherit">
-              Reload this page to get the latest update
-            </Typography>
-            <Button
-              size={props.basic ? "small" : "medium"}
-              variant="outlined"
-              color="secondary"
-              startIcon={<ReloadIcon />}
-              onClick={() => window.location.reload()}
-            >
-              Reload
-            </Button>
-          </>
+          <Button
+            size={props.basic ? "small" : "medium"}
+            variant="outlined"
+            color="secondary"
+            startIcon={<ReloadIcon />}
+            onClick={() => window.location.reload()}
+            sx={{ mt: 1 }}
+          >
+            Reload
+          </Button>
         ),
       };
     }
   }
 
   if (error.message.includes("Failed to fetch")) {
-    renderProps = { Icon: OfflineIcon, message: "You’re offline" };
+    renderProps = {
+      Icon: OfflineIcon,
+      message: "You’re offline",
+      description: isOffline ? null : (
+        <Button
+          size={props.basic ? "small" : "medium"}
+          variant="outlined"
+          color="secondary"
+          startIcon={<ReloadIcon />}
+          onClick={() => window.location.reload()}
+          sx={{ mt: 1 }}
+        >
+          Reload
+        </Button>
+      ),
+    };
   }
 
   return <EmptyState role="alert" fullScreen {...renderProps} {...props} />;

src/components/Table/EmptyTable.tsx

@@ -1,9 +1,14 @@
 import { useAtom, useSetAtom } from "jotai";
+import { Offline, Online } from "react-detect-offline";
 
 import { Grid, Stack, Typography, Button, Divider } from "@mui/material";
-import { Import as ImportIcon } from "@src/assets/icons";
-import { AddColumn as AddColumnIcon } from "@src/assets/icons";
+import {
+  Import as ImportIcon,
+  AddColumn as AddColumnIcon,
+} from "@src/assets/icons";
+import OfflineIcon from "@mui/icons-material/CloudOff";
 
+import EmptyState from "@src/components/EmptyState";
 import ImportData from "@src/components/TableToolbar/ImportData/ImportData";
 
 import {
@@ -125,21 +130,35 @@ export default function EmptyTable() {
   }
 
   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>
+    <>
+      <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>
+    </>
   );
 }