From 0025141e9dc0d6cce477d1cf787b93f855d43b8f Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Tue, 10 Sep 2024 13:24:01 -0400
Subject: [PATCH] Moved skeleton to its own file for increased readability

---
 Client/src/Pages/PageSpeed/Details/index.jsx  | 58 +------------------
 .../src/Pages/PageSpeed/Details/skeleton.jsx  | 43 ++++++++++++++
 2 files changed, 45 insertions(+), 56 deletions(-)
 create mode 100644 Client/src/Pages/PageSpeed/Details/skeleton.jsx

diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx
index 6de6d04d6..40d71dc5e 100644
--- a/Client/src/Pages/PageSpeed/Details/index.jsx
+++ b/Client/src/Pages/PageSpeed/Details/index.jsx
@@ -1,12 +1,5 @@
 import PropTypes from "prop-types";
-import {
-  Box,
-  Button,
-  Skeleton,
-  Stack,
-  Tooltip,
-  Typography,
-} from "@mui/material";
+import { Box, Button, Stack, Tooltip, Typography } from "@mui/material";
 import { PieChart } from "@mui/x-charts/PieChart";
 import { useDrawingArea } from "@mui/x-charts";
 import { useEffect, useState } from "react";
@@ -14,13 +7,13 @@ import { useTheme } from "@emotion/react";
 import { useNavigate, useParams } from "react-router-dom";
 import { useSelector } from "react-redux";
 import {
-  formatDuration,
   formatDurationRounded,
   formatDurationSplit,
 } from "../../../Utils/timeUtils";
 import { ChartBox, IconBox, StatBox } from "./styled";
 import { logger } from "../../../Utils/Logger";
 import { networkService } from "../../../main";
+import SkeletonLayout from "./skeleton";
 import SettingsIcon from "../../../assets/icons/settings-bold.svg?react";
 import ScoreIcon from "../../../assets/icons/monitor-graph-line.svg?react";
 import PerformanceIcon from "../../../assets/icons/performance-report.svg?react";
@@ -118,53 +111,6 @@ PieValueLabel.propTypes = {
   highlighted: PropTypes.bool,
 };
 
-/**
- * Renders a skeleton layout.
- *
- * @returns {JSX.Element}
- */
-const SkeletonLayout = () => {
-  const theme = useTheme();
-
-  return (
-    <>
-      <Skeleton variant="rounded" width="15%" height={34} />
-      <Stack direction="row" gap={theme.spacing(4)}>
-        <Skeleton variant="circular" style={{ minWidth: 24, minHeight: 24 }} />
-        <Box width="85%">
-          <Skeleton variant="rounded" width="50%" height={24} />
-          <Skeleton
-            variant="rounded"
-            width="50%"
-            height={18}
-            sx={{ mt: theme.spacing(4) }}
-          />
-        </Box>
-        <Skeleton
-          variant="rounded"
-          width="15%"
-          height={34}
-          sx={{ alignSelf: "flex-end" }}
-        />
-      </Stack>
-      <Stack
-        direction="row"
-        justifyContent="space-between"
-        gap={theme.spacing(20)}
-        flexWrap="wrap"
-      >
-        <Skeleton variant="rounded" width="30%" height={90} sx={{ flex: 1 }} />
-        <Skeleton variant="rounded" width="30%" height={90} sx={{ flex: 1 }} />
-        <Skeleton variant="rounded" width="30%" height={90} sx={{ flex: 1 }} />
-      </Stack>
-      <Skeleton variant="rounded" width="25%" height={24} />
-      <Skeleton variant="rounded" width="100%" height={300} />
-      <Skeleton variant="rounded" width="25%" height={24} />
-      <Skeleton variant="rounded" width="100%" height={300} />
-    </>
-  );
-};
-
 const PageSpeedDetails = () => {
   const theme = useTheme();
   const navigate = useNavigate();
diff --git a/Client/src/Pages/PageSpeed/Details/skeleton.jsx b/Client/src/Pages/PageSpeed/Details/skeleton.jsx
new file mode 100644
index 000000000..5f64b1e0d
--- /dev/null
+++ b/Client/src/Pages/PageSpeed/Details/skeleton.jsx
@@ -0,0 +1,43 @@
+import { Box, Skeleton, Stack } from "@mui/material";
+
+/**
+ * Renders a skeleton layout.
+ *
+ * @returns {JSX.Element}
+ */
+const SkeletonLayout = () => {
+  return (
+    <>
+      <Skeleton variant="rounded" width="15%" height={34} />
+      <Stack direction="row" gap={4}>
+        <Skeleton variant="circular" style={{ minWidth: 24, minHeight: 24 }} />
+        <Box width="85%">
+          <Skeleton variant="rounded" width="50%" height={24} />
+          <Skeleton variant="rounded" width="50%" height={18} sx={{ mt: 4 }} />
+        </Box>
+        <Skeleton
+          variant="rounded"
+          width="15%"
+          height={34}
+          sx={{ alignSelf: "flex-end" }}
+        />
+      </Stack>
+      <Stack
+        direction="row"
+        justifyContent="space-between"
+        gap={20}
+        flexWrap="wrap"
+      >
+        <Skeleton variant="rounded" width="30%" height={90} sx={{ flex: 1 }} />
+        <Skeleton variant="rounded" width="30%" height={90} sx={{ flex: 1 }} />
+        <Skeleton variant="rounded" width="30%" height={90} sx={{ flex: 1 }} />
+      </Stack>
+      <Skeleton variant="rounded" width="25%" height={24} />
+      <Skeleton variant="rounded" width="100%" height={300} />
+      <Skeleton variant="rounded" width="25%" height={24} />
+      <Skeleton variant="rounded" width="100%" height={300} />
+    </>
+  );
+};
+
+export default SkeletonLayout;