Refactored button spinner

Client/src/Components/TabPanels/Account/PasswordPanel.jsx

@@ -2,7 +2,7 @@ import TabPanel from "@mui/lab/TabPanel";
 import React, { useState } from "react";
 import { useTheme } from "@emotion/react";
 import { Box, Stack, Typography } from "@mui/material";
-import ButtonSpinner from "../../ButtonSpinner";
+import LoadingButton from "@mui/lab/LoadingButton";
 import Field from "../../Inputs/Field";
 import { credentials } from "../../../Validation/validation";
 import Alert from "../../Alert";
@@ -164,19 +164,20 @@ const PasswordPanel = () => {
           </Box>
         </Stack>
         <Stack direction="row" justifyContent="flex-end">
-          <ButtonSpinner
-            level="primary"
-            label="Save"
+          <LoadingButton
+            variant="contained"
+            color="primary"
             onClick={handleSubmit}
-            isLoading={isLoading}
-            loadingText="Saving..."
+            loading={isLoading}
+            loadingIndicator="Saving..."
             disabled={Object.keys(errors).length !== 0 && true}
             sx={{
-              paddingX: theme.spacing(12),
-              width: "fit-content",
+              px: theme.spacing(12),
               mt: theme.spacing(20),
             }}
-          />
+          >
+            Save
+          </LoadingButton>
         </Stack>
       </Stack>
     </TabPanel>

Client/src/Components/TabPanels/Account/ProfilePanel.jsx

@@ -2,7 +2,6 @@ import { useTheme } from "@emotion/react";
 import { useRef, useState } from "react";
 import TabPanel from "@mui/lab/TabPanel";
 import { Box, Button, Divider, Modal, Stack, Typography } from "@mui/material";
-import ButtonSpinner from "../../ButtonSpinner";
 import Avatar from "../../Avatar";
 import Field from "../../Inputs/Field";
 import ImageField from "../../Inputs/Image";
@@ -19,6 +18,7 @@ import { formatBytes } from "../../../Utils/fileUtils";
 import { clearUptimeMonitorState } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
 import { createToast } from "../../../Utils/toastUtils";
 import { logger } from "../../../Utils/Logger";
+import LoadingButton from "@mui/lab/LoadingButton";
 
 /**
  * ProfilePanel component displays a form for editing user profile information
@@ -308,19 +308,19 @@ const ProfilePanel = () => {
         />
         <Stack direction="row" justifyContent="flex-end">
           <Box width="fit-content">
-            <ButtonSpinner
-              level="primary"
-              label="Save"
+            <LoadingButton
+              variant="contained"
+              color="primary"
               onClick={handleSaveProfile}
-              isLoading={isLoading}
-              loadingText="Saving..."
+              loading={isLoading}
+              loadingIndicator="Saving..."
               disabled={
                 Object.keys(errors).length !== 0 && !errors?.picture && true
               }
-              sx={{
-                paddingX: theme.spacing(12),
-              }}
-            />
+              sx={{ px: theme.spacing(12) }}
+            >
+              Save
+            </LoadingButton>
           </Box>
         </Stack>
       </Stack>
@@ -391,12 +391,14 @@ const ProfilePanel = () => {
             <Button variant="text" color="info" onClick={() => setIsOpen("")}>
               Cancel
             </Button>
-            <ButtonSpinner
-              level="error"
-              label="Delete account"
+            <LoadingButton
+              variant="contained"
+              color="error"
               onClick={handleDeleteAccount}
-              isLoading={isLoading}
-            />
+              loading={isLoading}
+            >
+              Delete account
+            </LoadingButton>
           </Stack>
         </Stack>
       </Modal>

Client/src/Components/TabPanels/Account/TeamPanel.jsx

@@ -11,7 +11,6 @@ import {
   TextField,
   Typography,
 } from "@mui/material";
-import ButtonSpinner from "../../ButtonSpinner";
 import { useEffect, useState } from "react";
 import EditSvg from "../../../assets/icons/edit.svg?react";
 import Field from "../../Inputs/Field";
@@ -22,6 +21,7 @@ import { useSelector } from "react-redux";
 import BasicTable from "../../BasicTable";
 import Remove from "../../../assets/icons/trash-bin.svg?react";
 import Select from "../../Inputs/Select";
+import LoadingButton from "@mui/lab/LoadingButton";
 
 /**
  * TeamPanel component manages the organization and team members,
@@ -392,13 +392,15 @@ const TeamPanel = () => {
             <Button variant="text" color="info" onClick={closeInviteModal}>
               Cancel
             </Button>
-            <ButtonSpinner
-              level="primary"
-              label="Send invite"
+            <LoadingButton
+              variant="contained"
+              color="primary"
               onClick={handleInviteMember}
-              isLoading={false}
+              loading={false}
               disabled={Object.keys(errors).length !== 0}
-            />
+            >
+              Send invite
+            </LoadingButton>
           </Stack>
         </Stack>
       </Modal>