add loading in login

components/Main/Login.js

@@ -18,6 +18,7 @@ class Login extends Component {
 				username: "",
 				password: "",
 			},
+			loading: false,
 		};
 	}
 
@@ -62,11 +63,13 @@ class Login extends Component {
 			console.log(hasError ? "Form has errors. Check!" : "Form Submitted!");
 			e.preventDefault();
 			if (!hasError) {
+				this.setState({ loading: true });
 				const { username, password } = this.state.formLogin;
 				const auth = await login(username, password);
 				this.props.setToken(auth.data.token);
 				this.props.setUser(auth.data.user);
 				axiosAPI.defaults.headers.common["Authorization"] = auth.data.token;
+				this.setState({ loading: false });
 				if (auth.data.user.role.id === 2022) {
 					Router.push({ pathname: "/pt/pemantauan" });
 				} else if ([2020, 2021, 2023].includes(auth.data.user.role.id)) {
@@ -76,6 +79,7 @@ class Login extends Component {
 				}
 			}
 		} catch (error) {
+			this.setState({ loading: false });
 			this.setState({ error: error.response?.data.message || error.response });
 		}
 	};
@@ -124,7 +128,7 @@ class Login extends Component {
 						<div className="btn-radius">
 							<Button color type="submit" block className=" mt-3 btn-login">
 								<text className="text-login">
-									<b className="font-color-white">Login</b>
+									<b className="font-color-white">{this.state.loading ? "Loading..." : "Login"}</b>
 								</text>
 							</Button>
 						</div>