[ADDED] : Loading added in login page

There is no loading after calling login api so i added loader in which this loader will start when we click on login and finish after we get the response.

Author: AbhiPatel10

frontend/src/pages/auth/Login.jsx

@@ -1,13 +1,15 @@
-import React from "react";
+import React, { useState } from "react";
 import { Box, Button, TextField, Typography } from "@mui/material";
 import { Link, useNavigate } from "react-router-dom";
 import { apiAuth } from "../../services/models/authModel";
 import { toast } from "react-hot-toast";
 import * as Yup from "yup";
 import { useFormik } from "formik";
+import { ColorRing } from 'react-loader-spinner'
 
 const Login = () => {
   const navigate = useNavigate();
+  const [loading, setLoading] = useState(false)
 
   const initialValues = {
     email: "",
@@ -30,7 +32,7 @@ const Login = () => {
       initialValues,
       validationSchema,
       onSubmit: (values) => {
-        // setLoading(true);
+        setLoading(true);
         loginUser(values.email, values.password);
       },
     });
@@ -52,6 +54,7 @@ const Login = () => {
       } else {
         toast.error("Error");
       }
+      setLoading(false)
     });
   };
 
@@ -97,8 +100,15 @@ const Login = () => {
           variant="contained"
           sx={ { display: "block", mt: 2, mx: "auto" } }
           type="submit"
-        >
-          Login
+          disabled={ loading }
+        >{ loading ? <ColorRing
+          visible={ true }
+          height="30"
+          width="30"
+          wrapperStyle={ {} }
+          wrapperClass="blocks-wrapper"
+          colors={ [''] }
+        /> : "Login" }
         </Button>
         <Typography variant="h6" component="p" sx={ { my: 2 } }>
           Don't have an account ? Then{ "  " }