Merge pull request #82 from kjannette/spin

Spin

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,
@@ -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,11 @@ const SignupPage = () => {
     }
 
     //const planType = determinePlan(isAnnual, activeRadioOption);
-    setIsBusy(true);
+
     if (paymentDataValues && dataValues) {
+      setShowPaymentModal(false);
+      window.scrollTo({ top: 0, behavior: "smooth" });
+      setIsBusy(true);
       try {
         const data = await handleStripeAuthorization(
           paymentDataValues,
@@ -364,7 +369,7 @@ const SignupPage = () => {
 
           const user = userCredential.user;
           dataValues = { ...dataValues, ...data };
-          await saveUserData(
+          const res = await saveUserData(
             user.uid,
             dataValues,
             customerId,
@@ -373,6 +378,8 @@ const SignupPage = () => {
             subscriptionPeriodEnd,
             subscriptionId
           );
+          console.log("res", res);
+          setIsBusy(false);
           navigate("/dashboard");
         }
       } catch (error) {
@@ -498,8 +505,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 +543,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 +602,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 {