more

src/Components/SignupPage/SignupPage.js

@@ -11,6 +11,7 @@ import Toggle from "../../pageElements/Toggle";
 import TextInput from "../../pageElements/TextInput";
 import { v4 as uuidv4 } from "uuid";
 import { collection, setDoc, doc } from "firebase/firestore";
+import LoadingSpinner from "../../pageElements/LoadingSpinner";
 import { splitEvery } from "../../Utils/Array";
 import {
   getFormDataDefaults,
@@ -36,7 +37,7 @@ const SignupPage = () => {
   const navigate = useNavigate();
   const [notice, setNotice] = useState("");
   const fieldsChunkSize = 2;
-  const [isBusy, setIsBusy] = useState(false);
+  const [isBusy, setIsBusy] = useState(true);
   const [data, setData] = useState(getFormDataDefaults(signupFields));
   const [paymentData, setPaymentData] = useState(
     getFormDataDefaults(paymentfields)
@@ -214,7 +215,8 @@ const SignupPage = () => {
 
     try {
       const usersRef = collection(db, "users");
-      await setDoc(doc(usersRef, fbAuthUid), userData);
+      const res = await setDoc(doc(usersRef, fbAuthUid), userData);
+      return res;
     } catch (error) {
       console.log(`Error saving new user to db: ${error}`);
     }
@@ -337,8 +339,9 @@ const SignupPage = () => {
     }
 
     //const planType = determinePlan(isAnnual, activeRadioOption);
-    setIsBusy(true);
+
     if (paymentDataValues && dataValues) {
+      setIsBusy(true);
       try {
         const data = await handleStripeAuthorization(
           paymentDataValues,
@@ -364,7 +367,7 @@ const SignupPage = () => {
 
           const user = userCredential.user;
           dataValues = { ...dataValues, ...data };
-          await saveUserData(
+          const res = await saveUserData(
             user.uid,
             dataValues,
             customerId,
@@ -373,7 +376,10 @@ const SignupPage = () => {
             subscriptionPeriodEnd,
             subscriptionId
           );
-          navigate("/dashboard");
+          if (res) {
+            setIsBusy(false);
+            navigate("/dashboard");
+          }
         }
       } catch (error) {
         setIsBusy(false);
@@ -498,8 +504,9 @@ const SignupPage = () => {
 
   return (
     <div className="signup-super-container">
-      {!isUpgrade ? signupForm : <></>}
-      {showSelectPlan ? (
+      {isBusy ? <LoadingSpinner message={""} loaderType="MoonLoader" /> : null}
+      {!isUpgrade && !isBusy ? signupForm : <></>}
+      {showSelectPlan && !isBusy ? (
         <div className="select-plan-container">
           <div className="select-sub-left">
             <div className="select-plan-header">
@@ -535,7 +542,7 @@ const SignupPage = () => {
                 </div>
               ))}
             </div>
-            {showAddAccount ? (
+            {showAddAccount && !isBusy ? (
               <div className="show-addaccount-wrapper">
                 <div className="show-addaccount-container">
                   <div className="plan-header-right-lower">
@@ -594,7 +601,7 @@ const SignupPage = () => {
               <></>
             )}
             <div className="signup-button-box">
-              {!showAddAccount ? (
+              {!showAddAccount && !isBusy ? (
                 <>
                   {showAddAccountBtn ? (
                     <Button

src/pageElements/LoadingSpinner.js

@@ -1,9 +1,10 @@
 import { useState } from "react";
 import RingLoader from "react-spinners/RingLoader";
+import MoonLoader from "react-spinners/MoonLoader";
 import "../styles/spinner.scss";
 
 const LoadingSpinner = (props) => {
-  const { message } = props;
+  const { message, loaderType } = props;
   let [loading, setLoading] = useState(true);
   const color = "#31e0f7";
 
@@ -14,21 +15,39 @@ const LoadingSpinner = (props) => {
     borderColor: "#a4ebf4",
   };
 
+  const isMoon = loaderType === "MoonLoader" ? true : false;
   return (
-    <div className="spinner-outer-wrapper">
-      <div className="spinner-container">
-        <div className="loading-text-box">
-          <p className="loading-graph">{message}</p>
+    <div>
+      {isMoon ? (
+        <div>
+          <div className="spinner-outer-wrapper moon">
+            <MoonLoader
+              color={color}
+              loading={loading}
+              cssOverride={override}
+              size={150}
+              aria-label="Loading Spinner"
+              data-testid="loader"
+            />
+          </div>
         </div>
-        <RingLoader
-          color={color}
-          loading={loading}
-          cssOverride={override}
-          size={150}
-          aria-label="Loading Spinner"
-          data-testid="loader"
-        />
-      </div>
+      ) : (
+        <div className="spinner-outer-wrapper">
+          <div className="spinner-container">
+            <div className="loading-text-box">
+              <p className="loading-graph">{message}</p>
+            </div>
+            <RingLoader
+              color={color}
+              loading={loading}
+              cssOverride={override}
+              size={150}
+              aria-label="Loading Spinner"
+              data-testid="loader"
+            />
+          </div>
+        </div>
+      )}
     </div>
   );
 };

src/styles/spinner.scss

@@ -4,6 +4,9 @@
   align-items: center;
   margin-right: auto;
   margin-left: auto;
+  &.moon {
+    margin-top: 70px;
+  }
 }
 
 .spinner-container {