From ada89f9972fca055b42034165e1a63bebfd2dbe9 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 4 Sep 2024 15:51:45 -0700
Subject: [PATCH] Extract incidents skeleton

---
 Client/src/Pages/Incidents/index.jsx    | 35 ++-----------------------
 Client/src/Pages/Incidents/skeleton.jsx | 30 +++++++++++++++++++++
 2 files changed, 32 insertions(+), 33 deletions(-)
 create mode 100644 Client/src/Pages/Incidents/skeleton.jsx

diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx
index 5d756298e..b61b04e16 100644
--- a/Client/src/Pages/Incidents/index.jsx
+++ b/Client/src/Pages/Incidents/index.jsx
@@ -1,43 +1,12 @@
 import { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
-import {
-  ButtonGroup,
-  Stack,
-  Skeleton,
-  Typography,
-  Button,
-} from "@mui/material";
+import { ButtonGroup, Stack, Typography, Button } from "@mui/material";
 import { networkService } from "../../main";
 import { useTheme } from "@emotion/react";
 import Select from "../../Components/Inputs/Select";
 import IncidentTable from "./IncidentTable";
 import "./index.css";
-
-/**
- * Renders a skeleton layout.
- *
- * @returns {JSX.Element}
- */
-const SkeletonLayout = () => {
-  const theme = useTheme();
-
-  return (
-    <>
-      <Stack direction="row" alignItems="center" gap={theme.spacing(6)}>
-        <Skeleton variant="rounded" width={150} height={34} />
-        <Skeleton variant="rounded" width="15%" height={34} />
-        <Skeleton
-          variant="rounded"
-          width="20%"
-          height={34}
-          sx={{ ml: "auto" }}
-        />
-      </Stack>
-      <Skeleton variant="rounded" width="100%" height={300} />
-      <Skeleton variant="rounded" width="100%" height={100} />
-    </>
-  );
-};
+import SkeletonLayout from "./skeleton";
 
 const Incidents = () => {
   const theme = useTheme();
diff --git a/Client/src/Pages/Incidents/skeleton.jsx b/Client/src/Pages/Incidents/skeleton.jsx
new file mode 100644
index 000000000..d1571ad3a
--- /dev/null
+++ b/Client/src/Pages/Incidents/skeleton.jsx
@@ -0,0 +1,30 @@
+import { Stack, Skeleton } from "@mui/material";
+import { useTheme } from "@emotion/react";
+
+/**
+ * Renders a skeleton layout.
+ *
+ * @returns {JSX.Element}
+ */
+const SkeletonLayout = () => {
+  const theme = useTheme();
+
+  return (
+    <>
+      <Stack direction="row" alignItems="center" gap={theme.spacing(6)}>
+        <Skeleton variant="rounded" width={150} height={34} />
+        <Skeleton variant="rounded" width="15%" height={34} />
+        <Skeleton
+          variant="rounded"
+          width="20%"
+          height={34}
+          sx={{ ml: "auto" }}
+        />
+      </Stack>
+      <Skeleton variant="rounded" width="100%" height={300} />
+      <Skeleton variant="rounded" width="100%" height={100} />
+    </>
+  );
+};
+
+export default SkeletonLayout;