Merge pull request #1219 from bluewave-labs/fix/fe/login-loading

fix: FE loading button on login page, resolves #1122

Client/src/Pages/Auth/Login.jsx

@@ -4,6 +4,7 @@ import { Box, Button, Stack, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import { credentials } from "../../Validation/validation";
 import { login } from "../../Features/Auth/authSlice";
+import LoadingButton from "@mui/lab/LoadingButton";
 import { useDispatch, useSelector } from "react-redux";
 import { createToast } from "../../Utils/toastUtils";
 import { networkService } from "../../main";
@@ -233,6 +234,7 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
 	const theme = useTheme();
 	const navigate = useNavigate();
 	const inputRef = useRef(null);
+	const authState = useSelector((state) => state.auth);
 
 	useEffect(() => {
 		if (inputRef.current) {
@@ -306,10 +308,11 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
 							<ArrowBackRoundedIcon />
 							Back
 						</Button>
-						<Button
+						<LoadingButton
 							variant="contained"
 							color="primary"
 							type="submit"
+							loading={authState.isLoading}
 							disabled={errors.password && true}
 							sx={{
 								width: "30%",
@@ -321,7 +324,7 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
 							}}
 						>
 							Continue
-						</Button>
+						</LoadingButton>
 					</Stack>
 				</Box>
 				<Box

Client/src/Utils/Theme/globalTheme.js

@@ -70,7 +70,13 @@ const baseTheme = (palette) => ({
 							},
 						},
 						{
-							props: (props) => props.variant === "contained" && props.disabled,
+							props: (props) => {
+								return (
+									props.variant === "contained" &&
+									props.disabled &&
+									props.classes.loadingIndicator === undefined // Do not apply to loading button
+								);
+							},
 							style: {
 								backgroundColor: `${theme.palette.secondary.main} !important`,
 								color: `${theme.palette.secondary.contrastText} !important`,
@@ -90,6 +96,7 @@ const baseTheme = (palette) => ({
 				}),
 			},
 		},
+
 		MuiIconButton: {
 			styleOverrides: {
 				root: ({ theme }) => ({