From 66c76aa076bdc4fdf8906d2fd476760d582824b1 Mon Sep 17 00:00:00 2001
From: Johanna Szepanski <johanna.szepanski@softhouse.se>
Date: Wed, 14 Aug 2024 11:42:40 +0200
Subject: [PATCH] move loader from IOC status to Status component to avoid
 getting a flickering unknown state

---
 src/components/IOC/IOCTable/IOCStatus.js | 26 ++-----
 src/components/common/Status/Status.js   | 99 +++++++++++++-----------
 2 files changed, 62 insertions(+), 63 deletions(-)

diff --git a/src/components/IOC/IOCTable/IOCStatus.js b/src/components/IOC/IOCTable/IOCStatus.js
index 88545f7e..4ca4d76c 100644
--- a/src/components/IOC/IOCTable/IOCStatus.js
+++ b/src/components/IOC/IOCTable/IOCStatus.js
@@ -1,5 +1,5 @@
 import { useContext, useMemo, useEffect } from "react";
-import { Grid, Skeleton } from "@mui/material";
+import { Grid } from "@mui/material";
 import { Status } from "../../common/Status";
 import { apiContext } from "../../../api/DeployApi";
 import { useAPIMethod } from "@ess-ics/ce-ui-common";
@@ -25,11 +25,7 @@ export const IOCStatus = ({ id, hideAlerts }) => {
     call: false
   });
 
-  const {
-    value: iocStateStatus,
-    loading: fetchIocStatusLoading,
-    dataReady: iocStatusReady
-  } = useAPIMethod({
+  const { value: iocStateStatus } = useAPIMethod({
     fcn: client.apis.IOCs.fetchIocStatus,
     params
   });
@@ -51,19 +47,11 @@ export const IOCStatus = ({ id, hideAlerts }) => {
       justifyContent="center"
       alignItems="center"
     >
-      {fetchIocStatusLoading || !iocStatusReady ? (
-        <Skeleton
-          variant="circular"
-          height={20}
-          width={20}
-        />
-      ) : (
-        <Status
-          state={iocStateStatus}
-          alert={iocAlert}
-          hideAlerts={hideAlerts}
-        />
-      )}
+      <Status
+        state={iocStateStatus}
+        alert={iocAlert}
+        hideAlerts={hideAlerts}
+      />
     </Grid>
   );
 };
diff --git a/src/components/common/Status/Status.js b/src/components/common/Status/Status.js
index da7bc53b..0a9e8dbb 100644
--- a/src/components/common/Status/Status.js
+++ b/src/components/common/Status/Status.js
@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 import { LabeledIcon } from "@ess-ics/ce-ui-common";
 import Popover from "../../common/Popover";
 import { object, bool, array } from "prop-types";
-import { useTheme } from "@mui/material";
+import { useTheme, Skeleton } from "@mui/material";
 import { PlayCircleFilled, PauseCircleFilled } from "@mui/icons-material";
 import { StatusPopoverContent } from "./StatusPopoverContent";
 import { StatusBadge } from "./StatusBadge";
@@ -28,57 +28,68 @@ const checkDisplayBadge = (status, hideAlerts) => {
 export function Status({ state, alert, hideAlerts = false }) {
   const [status, setStatus] = useState(null);
   const theme = useTheme();
-  let { id } = state;
 
   useEffect(() => {
-    setStatus(getStatus(state, alert));
+    if (state) {
+      setStatus(getStatus(state, alert));
+    }
   }, [state, alert]);
 
   return (
-    <Popover
-      id={`ioc-status-popover-${id}`}
-      renderOwningComponent={({
-        ariaOwns,
-        ariaHasPopup,
-        handlePopoverOpen,
-        handlePopoverClose
-      }) => (
-        <div
-          aria-owns={ariaOwns}
-          aria-haspopup={ariaHasPopup}
-          onMouseEnter={handlePopoverOpen}
-          onMouseLeave={handlePopoverClose}
-          style={{ color: theme.palette.status.icons }}
-        >
-          {checkDisplayBadge(status, hideAlerts) ? (
-            <StatusBadge
-              status={status}
-              theme={theme}
+    <>
+      {status ? (
+        <Popover
+          id={`ioc-status-popover-${state?.id ? state.id : ""}`}
+          renderOwningComponent={({
+            ariaOwns,
+            ariaHasPopup,
+            handlePopoverOpen,
+            handlePopoverClose
+          }) => (
+            <div
+              aria-owns={ariaOwns}
+              aria-haspopup={ariaHasPopup}
+              onMouseEnter={handlePopoverOpen}
+              onMouseLeave={handlePopoverClose}
+              style={{ color: theme.palette.status.icons }}
             >
-              <StatusIcon
-                alerts={alert?.alerts ? alert.alerts : []}
-                status={status}
-              />
-            </StatusBadge>
-          ) : (
-            <StatusIcon
-              alerts={alert?.alerts ? alert.alerts : []}
-              status={status}
-            />
+              {checkDisplayBadge(status, hideAlerts) ? (
+                <StatusBadge
+                  status={status}
+                  theme={theme}
+                >
+                  <StatusIcon
+                    alerts={alert?.alerts ? alert.alerts : []}
+                    status={status}
+                  />
+                </StatusBadge>
+              ) : (
+                <StatusIcon
+                  alerts={alert?.alerts ? alert.alerts : []}
+                  status={status}
+                />
+              )}
+            </div>
           )}
-        </div>
-      )}
-      popoverContents={
-        <StatusPopoverContent
-          title={statusConfig[status].title}
-          alerts={hideAlerts ? [] : alert?.alerts ? alert.alerts : []}
+          popoverContents={
+            <StatusPopoverContent
+              title={statusConfig[status].title}
+              alerts={hideAlerts ? [] : alert?.alerts ? alert.alerts : []}
+            />
+          }
+          anchorOrigin={{
+            vertical: "top",
+            horizontal: "right"
+          }}
         />
-      }
-      anchorOrigin={{
-        vertical: "top",
-        horizontal: "right"
-      }}
-    />
+      ) : (
+        <Skeleton
+          variant="circular"
+          height={24}
+          width={24}
+        />
+      )}
+    </>
   );
 }
 
-- 
GitLab