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>

Client/src/Pages/Auth/ForgotPassword.jsx

@@ -7,10 +7,10 @@ import { useEffect, useState } from "react";
 import { credentials } from "../../Validation/validation";
 import { useNavigate } from "react-router-dom";
 import Field from "../../Components/Inputs/Field";
-import ButtonSpinner from "../../Components/ButtonSpinner";
 import Logo from "../../assets/icons/bwu-icon.svg?react";
 import Key from "../../assets/icons/key.svg?react";
 import background from "../../assets/Images/background_pattern_decorative.png";
+import LoadingButton from "@mui/lab/LoadingButton";
 import "./index.css";
 
 const ForgotPassword = () => {
@@ -166,18 +166,19 @@ const ForgotPassword = () => {
               onChange={handleChange}
               error={errors.email}
             />
-            <ButtonSpinner
+            <LoadingButton
+              variant="contained"
+              color="primary"
+              loading={isLoading}
               disabled={errors.email !== undefined}
               onClick={handleSubmit}
-              isLoading={isLoading}
-              level="primary"
-              label="Send instructions"
               sx={{
                 width: "100%",
-                fontWeight: 400,
                 mt: theme.spacing(15),
               }}
-            />
+            >
+              Send instructions
+            </LoadingButton>
           </Box>
         </Stack>
       </Stack>

Client/src/Pages/Auth/SetNewPassword.jsx

@@ -8,11 +8,11 @@ import { useState } from "react";
 import { credentials } from "../../Validation/validation";
 import { useNavigate } from "react-router-dom";
 import Check from "../../Components/Check/Check";
-import ButtonSpinner from "../../Components/ButtonSpinner";
 import Field from "../../Components/Inputs/Field";
 import LockIcon from "../../assets/icons/lock-button-icon.svg?react";
 import background from "../../assets/Images/background_pattern_decorative.png";
 import Logo from "../../assets/icons/bwu-icon.svg?react";
+import LoadingButton from "@mui/lab/LoadingButton";
 import "./index.css";
 
 const SetNewPassword = () => {
@@ -266,14 +266,16 @@ const SetNewPassword = () => {
               />
             </Stack>
           </Box>
-          <ButtonSpinner
-            disabled={Object.keys(errors).length !== 0}
-            isLoading={isLoading}
+          <LoadingButton
+            variant="contained"
+            color="primary"
+            loading={isLoading}
             onClick={handleSubmit}
-            level="primary"
-            label="Reset password"
+            disabled={Object.keys(errors).length !== 0}
             sx={{ width: "100%", maxWidth: 400 }}
-          />
+          >
+            Reset password
+          </LoadingButton>
         </Stack>
       </Stack>
       <Box textAlign="center" p={theme.spacing(12)}>

Client/src/Pages/Monitors/Configure/index.jsx

@@ -16,13 +16,15 @@ import {
 } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
 import Field from "../../../Components/Inputs/Field";
 import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline";
+import PlayCircleOutlineRoundedIcon from "@mui/icons-material/PlayCircleOutlineRounded";
 import Select from "../../../Components/Inputs/Select";
 import Checkbox from "../../../Components/Inputs/Checkbox";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import PulseDot from "../../../Components/Animated/PulseDot";
-import "./index.css";
 import SkeletonLayout from "./skeleton";
-import ButtonSpinner from "../../../Components/ButtonSpinner";
+import LoadingButton from "@mui/lab/LoadingButton";
+import "./index.css";
+
 /**
  * Parses a URL string and returns a URL object.
  *
@@ -247,27 +249,40 @@ const Configure = () => {
                   ml: "auto",
                 }}
               >
-                <ButtonSpinner
-                  isLoading={isLoading}
-                  level="tertiary"
-                  label={monitor?.isActive ? "Pause" : "Resume"}
-                  img={<PauseCircleOutlineIcon />}
+                <LoadingButton
+                  variant="contained"
+                  color="secondary"
+                  loading={isLoading}
                   sx={{
                     backgroundColor: theme.palette.background.main,
-                    px: theme.spacing(6),
+                    px: theme.spacing(5),
                     mr: theme.spacing(6),
+                    "& svg": {
+                      mr: theme.spacing(2),
+                    },
                   }}
                   onClick={handlePause}
-                />
-                <ButtonSpinner
-                  isLoading={isLoading}
-                  level="error"
-                  label="Remove"
-                  sx={{
-                    px: theme.spacing(8),
-                  }}
+                >
+                  {monitor?.isActive ? (
+                    <>
+                      <PauseCircleOutlineIcon />
+                      Pause
+                    </>
+                  ) : (
+                    <>
+                      <PlayCircleOutlineRoundedIcon />
+                      Resume
+                    </>
+                  )}
+                </LoadingButton>
+                <Button
+                  variant="contained"
+                  color="error"
+                  sx={{ px: theme.spacing(8) }}
                   onClick={() => setIsOpen(true)}
-                />
+                >
+                  Remove
+                </Button>
               </Box>
             </Stack>
             <ConfigBox>
@@ -374,13 +389,15 @@ const Configure = () => {
               </Stack>
             </ConfigBox>
             <Stack direction="row" justifyContent="flex-end" mt="auto">
-              <ButtonSpinner
-                isLoading={isLoading}
-                level="primary"
-                label="Save"
+              <LoadingButton
+                variant="contained"
+                color="primary"
+                loading={isLoading}
                 sx={{ px: theme.spacing(12) }}
                 onClick={handleSubmit}
-              />
+              >
+                Save
+              </LoadingButton>
             </Stack>
           </Stack>
         </>
@@ -439,9 +456,14 @@ const Configure = () => {
             >
               Cancel
             </Button>
-            <Button variant="contained" color="error" onClick={handleRemove}>
+            <LoadingButton
+              variant="contained"
+              color="error"
+              loading={isLoading}
+              onClick={handleRemove}
+            >
               Delete
-            </Button>
+            </LoadingButton>
           </Stack>
         </Stack>
       </Modal>

Client/src/Pages/Settings/index.jsx

@@ -1,6 +1,5 @@
 import { useTheme } from "@emotion/react";
 import { Box, Button, Stack, styled, Typography } from "@mui/material";
-import ButtonSpinner from "../../Components/ButtonSpinner";
 import Field from "../../Components/Inputs/Field";
 import Link from "../../Components/Link";
 import Select from "../../Components/Inputs/Select";
@@ -10,6 +9,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { createToast } from "../../Utils/toastUtils";
 import { deleteMonitorChecksByTeamId } from "../../Features/UptimeMonitors/uptimeMonitorsSlice";
 import PropTypes from "prop-types";
+import LoadingButton from "@mui/lab/LoadingButton";
 const Settings = ({ isAdmin }) => {
   const theme = useTheme();
   const { user, authToken } = useSelector((state) => state.auth);
@@ -124,13 +124,15 @@ const Settings = ({ isAdmin }) => {
               />
               <Box>
                 <Typography>Clear all stats. This is irreversible.</Typography>
-                <ButtonSpinner
-                  isLoading={isLoading}
-                  level="error"
-                  label="Clear all stats"
+                <LoadingButton
+                  variant="contained"
+                  color="error"
+                  loading={isLoading}
                   onClick={handleClearStats}
                   sx={{ mt: theme.spacing(4) }}
-                />
+                >
+                  Clear all stats
+                </LoadingButton>
               </Box>
             </Stack>
           </ConfigBox>