From 58eec2e0ea18e244651a502ccab18ddb2de7d339 Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Mon, 10 Oct 2022 12:46:04 +1100
Subject: [PATCH] LoadedRowsSearch: add icon & offline indicator

---
 package.json                                  |  2 +
 .../TableToolbar/LoadedRowsStatus.tsx         | 64 +++++++++++++++----
 yarn.lock                                     | 12 ++++
 3 files changed, 65 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 6f35de2b..f0051f54 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
     "react-beautiful-dnd": "^13.1.0",
     "react-color-palette": "^6.2.0",
     "react-data-grid": "7.0.0-beta.5",
+    "react-detect-offline": "^2.4.5",
     "react-div-100vh": "^0.7.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
@@ -157,6 +158,7 @@
     "@types/node": "^17.0.23",
     "@types/react": "^18.0.5",
     "@types/react-beautiful-dnd": "^13.1.2",
+    "@types/react-detect-offline": "^2.4.1",
     "@types/react-div-100vh": "^0.4.0",
     "@types/react-dom": "^18.0.0",
     "@types/react-router-dom": "^5.3.3",
diff --git a/src/components/TableToolbar/LoadedRowsStatus.tsx b/src/components/TableToolbar/LoadedRowsStatus.tsx
index 04f619bd..f27531d9 100644
--- a/src/components/TableToolbar/LoadedRowsStatus.tsx
+++ b/src/components/TableToolbar/LoadedRowsStatus.tsx
@@ -1,13 +1,17 @@
 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";
+import OfflineIcon from "@mui/icons-material/CloudOffOutlined";
 
 import {
   tableScope,
   tableRowsAtom,
   tableNextPageAtom,
 } from "@src/atoms/tableScope";
+import { spreadSx } from "@src/utils/ui";
 
 const StatusText = forwardRef(function StatusText(
   props: TypographyProps,
@@ -20,27 +24,48 @@ const StatusText = forwardRef(function StatusText(
       color="text.disabled"
       display="block"
       {...props}
-      style={{ userSelect: "none", ...props.style }}
+      sx={[
+        {
+          userSelect: "none",
+
+          "& svg": {
+            fontSize: 20,
+            width: "1em",
+            height: "1em",
+            verticalAlign: "bottom",
+            display: "inline-block",
+            mr: 0.75,
+          },
+        },
+        ...spreadSx(props.sx),
+      ]}
     />
   );
 });
 
+const loadingIcon = (
+  <SyncIcon
+    sx={{
+      animation: "spin-infinite 1.5s linear infinite",
+      "@keyframes spin-infinite": {
+        from: { transform: "rotate(45deg)" },
+        to: { transform: `rotate(${45 - 360}deg)` },
+      },
+    }}
+  />
+);
+
 function LoadedRowsStatus() {
   const [tableRows] = useAtom(tableRowsAtom, tableScope);
   const [tableNextPage] = useAtom(tableNextPageAtom, tableScope);
 
-  if (tableNextPage.loading) return <StatusText>Loading more…</StatusText>;
+  if (tableNextPage.loading)
+    return <StatusText>{loadingIcon}Loading more…</StatusText>;
 
   return (
-    <Tooltip
-      title={
-        tableNextPage.available
-          ? "Scroll to the bottom to load more rows"
-          : "All rows have been loaded in this table"
-      }
-      describeChild
-    >
+    <Tooltip title="Syncing with database in realtime" describeChild>
       <StatusText>
+        <SyncIcon style={{ transform: "rotate(45deg)" }} />
         Loaded {!tableNextPage.available && "all "}
         {tableRows.length} row{tableRows.length !== 1 && "s"}
       </StatusText>
@@ -50,8 +75,21 @@ function LoadedRowsStatus() {
 
 export default function SuspendedLoadedRowsStatus() {
   return (
-    <Suspense fallback={<StatusText>Loading…</StatusText>}>
-      <LoadedRowsStatus />
-    </Suspense>
+    <>
+      <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>
+    </>
   );
 }
diff --git a/yarn.lock b/yarn.lock
index b3672bac..5bf216e0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4052,6 +4052,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-detect-offline@^2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@types/react-detect-offline/-/react-detect-offline-2.4.1.tgz#5a71625d3614a56a6c3dacc53c5e9baed0610de0"
+  integrity sha512-ympSl07fvDbu7+EsnhrKwDWkdOqHp22lukhJYIHxnTfSIzOh1T/K9NGmpwKUtgJaNCfllwLvMSXBlyC6nHEObw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-div-100vh@^0.4.0":
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/@types/react-div-100vh/-/react-div-100vh-0.4.0.tgz#750e3ac45ee239ec2952089c1516f3b510bd103e"
@@ -11362,6 +11369,11 @@ react-data-grid@7.0.0-beta.5:
   dependencies:
     clsx "^1.1.1"
 
+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.0:
   version "12.0.0"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-12.0.0.tgz#4eab12cdb95692a077616770b5988f0adf806526"