.

components/login/Login.js

@@ -9,8 +9,10 @@ import { renderImage } from "../../services/imageHandling";
 import { useRouter } from "next/router";
 import { signIn } from "next-auth/react";
 import { toast } from "react-toastify";
+import { Loader } from "react-bootstrap-typeahead";
 
 const Login = props => {
+  const [loading, setLoading] = useState(false);
   const loginValidationSchema = Yup.object().shape({
     email: Yup.string().required("Email Id is Required").email("Please Enter An Valid Email Id"),
     password: Yup.string().required("Password is Required").min(6, "Password must be minimum 6 characters")
@@ -32,19 +34,22 @@ const Login = props => {
                   validationSchema={loginValidationSchema}
                   // enableReinitialize={true}
                   onSubmit={async values => {
+                    setLoading(true);
                     console.log("login values", values);
                     const signInResponse = await signIn("credentials", {
                       email: values.email,
                       password: values.password,
                       redirect: false
                     });
-                    console.log("signInResponse", signInResponse)
+                    console.log("signInResponse", signInResponse);
                     if (!signInResponse.ok) {
-                        toast.error(signInResponse.error)
-                        return
+                      toast.error(signInResponse.error);
+                      setLoading(false);
+                      return;
                     }
                     if (signInResponse.ok) {
-                        router.push("/vendor/business-details")
+                      setLoading(false);
+                      router.push("/vendor/business-details");
                     }
                     // router.push("")
                   }}
@@ -67,8 +72,8 @@ const Login = props => {
                         {errors.password && touched.password && <span className="form-error">{errors.password}</span>}
                       </div>
                       <div className="input-group">
-                        <Button type="submit" className="btn btn-primary btn-submit">
-                          Login
+                        <Button type="submit" className="btn btn-primary btn-submit" disabled={loading}>
+                          {loading ? <Loader /> : "Login"}
                         </Button>
                       </div>
                     </Form>

components/signup/Signup.js

@@ -14,6 +14,7 @@ import { toast } from "react-toastify";
 import OTPInput from "../common-components/OTPInput";
 import { finishVendorOtpVerification } from "../../redux/actions/vendorActions";
 import { signIn } from "next-auth/react";
+import { Loader } from "react-bootstrap-typeahead";
 
 const Signup = props => {
   console.log(props.type);
@@ -127,9 +128,11 @@ const Signup = props => {
                               return;
                             }
                             setOtpSent(true);
+                            setLoading(false);
                           } else {
                             e.preventDefault();
                             const oneTimePassword = otp.join("");
+                            setLoading(false);
                             const otpRes = await finishVendorOtpVerification({ email: values.email, oneTimePassword });
                             console.log("otpRes", otpRes);
                             if (otpRes.data.ok) {
@@ -138,10 +141,12 @@ const Signup = props => {
                                 password: values.password,
                                 redirect: false
                               });
+                              setLoading(false);
                               console.log("result", result);
                               router.push("/vendor/business-details");
                               //   toast.success("User registered successflly");
                             } else if (!otpRes.data.ok) {
+                              setLoading(false);
                               setOtp(new Array(4).fill(""));
                               toast.error("Invalid OTP, please try again.");
                             }
@@ -246,8 +251,8 @@ const Signup = props => {
                           </>
                         )}
                         <div className="input-group mb-0">
-                          <Button type="submit" className="btn btn-primary btn-submit" disabled={!values.termsConditions && !isValid}>
-                            {isOtpSent ? "Verify OTP" : "Sign Up Now"}
+                          <Button type="submit" className="btn btn-primary btn-submit" disabled={(!values.termsConditions && !isValid) || loading}>
+                            {loading ? <Loader/> : `${isOtpSent ? "Verify OTP" : "Sign Up Now"}`}
                           </Button>
                         </div>
                       </Form>

next.config.js

 /** @type {import('next').NextConfig} */
+const webpack = require("webpack");
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
+  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
+    config.plugins.push(
+     new webpack.ProvidePlugin({
+     $: "jquery",
+     jQuery: "jquery",
+     "window.jQuery": "jquery",
+    }));
+    return config;
+  },
   env: {
     stripePublishableKey: "pk_test_51LeAqWSD8iV80gmAKccLEZAm1mYnjlzkL1cJxWJKFaHEMPzArGRRECPOG64e8GX2Hd112zBq3vQ3xSVb5IZQCRmh00N3DRtRse"
   },