From 54b2da9d3bbf25555be720b81064246da5d07cfa Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 29 Aug 2024 11:58:51 -0700
Subject: [PATCH] refactor out skeleton

---
 Client/src/Pages/Monitors/Configure/index.jsx | 53 +------------------
 .../src/Pages/Monitors/Configure/skeleton.jsx | 52 ++++++++++++++++++
 2 files changed, 54 insertions(+), 51 deletions(-)
 create mode 100644 Client/src/Pages/Monitors/Configure/skeleton.jsx

diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index 2d2ca2a41..d05f2b194 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -2,7 +2,7 @@ import { useNavigate, useParams } from "react-router";
 import { useTheme } from "@emotion/react";
 import { useDispatch, useSelector } from "react-redux";
 import { useEffect, useState } from "react";
-import { Box, Modal, Skeleton, Stack, Typography } from "@mui/material";
+import { Box, Modal, Stack, Typography } from "@mui/material";
 import { monitorValidation } from "../../../Validation/validation";
 import { createToast } from "../../../Utils/toastUtils";
 import { logger } from "../../../Utils/Logger";
@@ -20,8 +20,7 @@ import Checkbox from "../../../Components/Inputs/Checkbox";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import PulseDot from "../../../Components/Animated/PulseDot";
 import "./index.css";
-import { networkService } from "../../../main";
-
+import SkeletonLayout from "./skeleton";
 /**
  * Parses a URL string and returns a URL object.
  *
@@ -36,54 +35,6 @@ const parseUrl = (url) => {
   }
 };
 
-/**
- * Renders a skeleton layout.
- *
- * @returns {JSX.Element}
- */
-const SkeletonLayout = () => {
-  const theme = useTheme();
-
-  return (
-    <>
-      <Skeleton variant="rounded" width="15%" height={34} />
-      <Stack gap={theme.gap.xl} mt={theme.gap.medium}>
-        <Stack direction="row" gap={theme.gap.small} mt={theme.gap.small}>
-          <Skeleton
-            variant="circular"
-            style={{ minWidth: 24, minHeight: 24 }}
-          />
-          <Box width="80%">
-            <Skeleton
-              variant="rounded"
-              width="50%"
-              height={24}
-              sx={{ mb: theme.gap.small }}
-            />
-            <Skeleton variant="rounded" width="50%" height={18} />
-          </Box>
-          <Stack
-            direction="row"
-            gap={theme.gap.medium}
-            sx={{
-              ml: "auto",
-              alignSelf: "flex-end",
-            }}
-          >
-            <Skeleton variant="rounded" width={150} height={34} />
-          </Stack>
-        </Stack>
-        <Skeleton variant="rounded" width="100%" height={200} />
-        <Skeleton variant="rounded" width="100%" height={200} />
-        <Skeleton variant="rounded" width="100%" height={200} />
-        <Stack direction="row" justifyContent="flex-end">
-          <Skeleton variant="rounded" width="15%" height={34} />
-        </Stack>
-      </Stack>
-    </>
-  );
-};
-
 /**
  * Configure page displays monitor configurations and allows for editing actions.
  * @component
diff --git a/Client/src/Pages/Monitors/Configure/skeleton.jsx b/Client/src/Pages/Monitors/Configure/skeleton.jsx
new file mode 100644
index 000000000..e8ac0d55d
--- /dev/null
+++ b/Client/src/Pages/Monitors/Configure/skeleton.jsx
@@ -0,0 +1,52 @@
+import { Box, Skeleton, Stack } from "@mui/material";
+import { useTheme } from "@emotion/react";
+
+/**
+ * Renders a skeleton layout.
+ *
+ * @returns {JSX.Element}
+ */
+const SkeletonLayout = () => {
+  const theme = useTheme();
+
+  return (
+    <>
+      <Skeleton variant="rounded" width="15%" height={34} />
+      <Stack gap={theme.gap.xl} mt={theme.gap.medium}>
+        <Stack direction="row" gap={theme.gap.small} mt={theme.gap.small}>
+          <Skeleton
+            variant="circular"
+            style={{ minWidth: 24, minHeight: 24 }}
+          />
+          <Box width="80%">
+            <Skeleton
+              variant="rounded"
+              width="50%"
+              height={24}
+              sx={{ mb: theme.gap.small }}
+            />
+            <Skeleton variant="rounded" width="50%" height={18} />
+          </Box>
+          <Stack
+            direction="row"
+            gap={theme.gap.medium}
+            sx={{
+              ml: "auto",
+              alignSelf: "flex-end",
+            }}
+          >
+            <Skeleton variant="rounded" width={150} height={34} />
+          </Stack>
+        </Stack>
+        <Skeleton variant="rounded" width="100%" height={200} />
+        <Skeleton variant="rounded" width="100%" height={200} />
+        <Skeleton variant="rounded" width="100%" height={200} />
+        <Stack direction="row" justifyContent="flex-end">
+          <Skeleton variant="rounded" width="15%" height={34} />
+        </Stack>
+      </Stack>
+    </>
+  );
+};
+
+export default SkeletonLayout;