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