LoadedRowsSearch: add icon & offline indicator

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>
+    </>
   );
 }