[Dashboard] Memory Page Loading Wheel (#11651)

* Switch memory view loading message over to a loading wheel to make UX less confusing.

* lint

Co-authored-by: Max Fitton <max@semprehealth.com>

dashboard/client/src/pages/dashboard/memory/Memory.tsx

@@ -1,6 +1,7 @@
 import {
   Box,
   Button,
+  CircularProgress,
   createStyles,
   FormControl,
   InputLabel,
@@ -18,6 +19,7 @@ import { useDispatch, useSelector } from "react-redux";
 import {
   getMemoryTable,
   MemoryGroupByKey,
+  MemoryTable,
   MemoryTableResponse,
   setMemoryTableCollection,
 } from "../../../api";
@@ -69,6 +71,14 @@ const useMemoryInfoStyles = makeStyles((theme: Theme) =>
 );
 
 const memoryTableSelector = (state: StoreState) => state.dashboard.memoryTable;
+const isEmpty = (memoryTable: MemoryTable) =>
+  Object.keys(memoryTable.group).length === 0;
+const loadTimerComplete = (mountedAt: Date) => {
+  const secondsBetween = Math.abs(
+    (new Date().getTime() - mountedAt.getTime()) / 1000,
+  );
+  return secondsBetween > 10;
+};
 
 const fetchMemoryTable = (
   groupByKey: MemoryGroupByKey,
@@ -83,7 +93,7 @@ const fetchMemoryTable = (
 const MemoryInfo: React.FC<{}> = () => {
   const memoryTable = useSelector(memoryTableSelector);
   const dispatch = useDispatch();
-
+  const mountedAt = new Date();
   const [paused, setPaused] = useState(false);
   const pauseButtonIcon = paused ? <PlayArrowIcon /> : <PauseIcon />;
 
@@ -97,6 +107,7 @@ const MemoryInfo: React.FC<{}> = () => {
       setMemoryTableCollection(false);
     };
   }, []);
+
   // Set up polling memory data
   const fetchData = useCallback(
     fetchMemoryTable(groupBy, (resp) =>
@@ -117,17 +128,19 @@ const MemoryInfo: React.FC<{}> = () => {
       }
     };
     return cleanup;
-  }, [paused, fetchData]);
+  }, [paused, fetchData, dispatch]);
 
-  if (!memoryTable) {
+  if (!memoryTable || (isEmpty(memoryTable) && !loadTimerComplete(mountedAt))) {
     return (
-      <Typography color="textSecondary">Loading memory information</Typography>
+      <Typography align="center" color="textSecondary" variant="h3">
+        <CircularProgress /> Loading
+      </Typography>
     );
   }
-  if (Object.keys(memoryTable.group).length === 0) {
+  if (isEmpty(memoryTable) && loadTimerComplete(mountedAt)) {
     return (
-      <Typography color="textSecondary">
-        Finished loading, but have found no memory data yet.
+      <Typography align="center" color="textSecondary" variant="h3">
+        Finished loading, but nothing found.
       </Typography>
     );
   }
@@ -170,6 +183,10 @@ const MemoryInfo: React.FC<{}> = () => {
         color="primary"
         className={classes.pauseButton}
         onClick={() => {
+          if (intervalId.current) {
+            clearInterval(intervalId.current);
+            intervalId.current = null;
+          }
           setMemoryTableCollection(!paused);
           setPaused(!paused);
         }}