From 2c6b1d07f453f1479b893a679f88c2bbbee1a1a6 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 27 Nov 2024 11:30:59 +0800
Subject: [PATCH 1/4] Add loading button

---
 Client/src/Pages/Auth/Login.jsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/Client/src/Pages/Auth/Login.jsx b/Client/src/Pages/Auth/Login.jsx
index ece5de314..799fa8ae8 100644
--- a/Client/src/Pages/Auth/Login.jsx
+++ b/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";
@@ -231,6 +232,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) {
@@ -302,10 +304,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%",
@@ -317,7 +320,15 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
 							}}
 						>
 							Continue
-						</Button>
+						</LoadingButton> */}
+						<LoadingButton
+							type="submit"
+							variant="contained"
+							color="primary"
+							loading={authState.isLoading}
+						>
+							{"Continue"}
+						</LoadingButton>
 					</Stack>
 				</Box>
 				<Box
@@ -379,6 +390,8 @@ const Login = () => {
 	const [errors, setErrors] = useState({});
 	const [step, setStep] = useState(0);
 
+	useEffect(() => {}, [authState.isLoading]);
+
 	useEffect(() => {
 		if (authToken) {
 			navigate("/monitors");

From bf9199a2b72700f4463221e2d9e60c0a2d93dfe5 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 27 Nov 2024 13:54:12 +0800
Subject: [PATCH 2/4] update theme to exclude styling from loading button

---
 Client/src/Utils/Theme/globalTheme.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/Client/src/Utils/Theme/globalTheme.js b/Client/src/Utils/Theme/globalTheme.js
index 0839cd0e8..9fb772c2d 100644
--- a/Client/src/Utils/Theme/globalTheme.js
+++ b/Client/src/Utils/Theme/globalTheme.js
@@ -81,7 +81,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`,
@@ -101,6 +107,7 @@ const baseTheme = (palette) => ({
 				}),
 			},
 		},
+
 		MuiIconButton: {
 			styleOverrides: {
 				root: ({ theme }) => ({

From ac4834aa74108aaad2f661f1743b4b81284a54d7 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 28 Nov 2024 09:48:49 +0800
Subject: [PATCH 3/4] remove empty useEffect

---
 Client/src/Pages/Auth/Login.jsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/Client/src/Pages/Auth/Login.jsx b/Client/src/Pages/Auth/Login.jsx
index 799fa8ae8..e10cfe5b8 100644
--- a/Client/src/Pages/Auth/Login.jsx
+++ b/Client/src/Pages/Auth/Login.jsx
@@ -390,8 +390,6 @@ const Login = () => {
 	const [errors, setErrors] = useState({});
 	const [step, setStep] = useState(0);
 
-	useEffect(() => {}, [authState.isLoading]);
-
 	useEffect(() => {
 		if (authToken) {
 			navigate("/monitors");

From 7e8cf9edde07bb188a5c5c6359542b02bd94bec7 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 28 Nov 2024 09:53:47 +0800
Subject: [PATCH 4/4] apply original styles to LoadingButton

---
 Client/src/Pages/Auth/Login.jsx | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/Client/src/Pages/Auth/Login.jsx b/Client/src/Pages/Auth/Login.jsx
index e10cfe5b8..609ffa99e 100644
--- a/Client/src/Pages/Auth/Login.jsx
+++ b/Client/src/Pages/Auth/Login.jsx
@@ -304,7 +304,7 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
 							<ArrowBackRoundedIcon />
 							Back
 						</Button>
-						{/* <LoadingButton
+						<LoadingButton
 							variant="contained"
 							color="primary"
 							type="submit"
@@ -320,14 +320,6 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
 							}}
 						>
 							Continue
-						</LoadingButton> */}
-						<LoadingButton
-							type="submit"
-							variant="contained"
-							color="primary"
-							loading={authState.isLoading}
-						>
-							{"Continue"}
 						</LoadingButton>
 					</Stack>
 				</Box>