From 899111e48bfa9c245da41968353cef5414862f16 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 3 Sep 2024 10:23:26 -0700
Subject: [PATCH] Add loading button to createPageSpeed

---
 Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
index 00c02a362..4c8204153 100644
--- a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
+++ b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
@@ -1,4 +1,6 @@
-import { Box, Button, Stack, Typography } from "@mui/material";
+import { Box, Stack, Typography } from "@mui/material";
+import LoadingButton from "@mui/lab/LoadingButton";
+
 import { useState } from "react";
 import { useTheme } from "@emotion/react";
 import { useDispatch, useSelector } from "react-redux";
@@ -12,11 +14,11 @@ import { createPageSpeed } from "../../../Features/PageSpeedMonitor/pageSpeedMon
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import "./index.css";
 import { logger } from "../../../Utils/Logger";
-
 const CreatePageSpeed = () => {
   const theme = useTheme();
   const navigate = useNavigate();
   const dispatch = useDispatch();
+  const { isLoading } = useSelector((state) => state.pageSpeedMonitors);
 
   const MS_PER_MINUTE = 60000;
   const { user, authToken } = useSelector((state) => state.auth);
@@ -226,7 +228,8 @@ const CreatePageSpeed = () => {
           </Stack>
         </Stack>
         <Stack direction="row" justifyContent="flex-end" mt="auto">
-          <Button
+          <LoadingButton
+            loading={isLoading}
             type="submit"
             variant="contained"
             color="primary"
@@ -234,7 +237,7 @@ const CreatePageSpeed = () => {
             sx={{ px: theme.spacing(12), mt: theme.spacing(12) }}
           >
             Create
-          </Button>
+          </LoadingButton>
         </Stack>
       </Stack>
     </Stack>