From c8a044f4b179aa87556a52d52043da18e6ebc645 Mon Sep 17 00:00:00 2001
From: Shahan Neda <shahan.neda@gmail.com>
Date: Sun, 1 Sep 2024 23:22:24 -0700
Subject: [PATCH] Add loading to sign up page

---
 frontend/src/components/auth/Join.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/auth/Join.tsx b/frontend/src/components/auth/Join.tsx
index cfafbed4..a2f101c9 100644
--- a/frontend/src/components/auth/Join.tsx
+++ b/frontend/src/components/auth/Join.tsx
@@ -10,6 +10,7 @@ import {
   Link,
   Radio,
   RadioGroup,
+  Spinner,
   Stack,
   Text,
   Textarea,
@@ -113,7 +114,7 @@ const Join = (): React.ReactElement => {
 
   const [attemptedSubmit, setAttemptedSubmit] = useState(false);
   const isWebView = useIsWebView();
-  const [signup] = useMutation<{ createOnboardingRequest: OnboardingRequest }>(
+  const [signup, {loading : signUpLoading}] = useMutation<{ createOnboardingRequest: OnboardingRequest }>(
     SIGNUP,
   );
   const toast = useToast();
@@ -589,7 +590,7 @@ const Join = (): React.ReactElement => {
         variant={{ base: "mobile-button-bold", lg: "desktop-button-bold" }}
         color="white"
         bgColor="primary.blue"
-        disabled={attemptedSubmit && !isRequestValid()}
+        disabled={(attemptedSubmit && !isRequestValid()) || signUpLoading}
         _hover={{ bgColor: "primary.blue" }}
         _disabled={{
           bgColor: "#CCCCCC !important",
@@ -599,7 +600,7 @@ const Join = (): React.ReactElement => {
         borderRadius="6px"
         onClick={handleSubmit}
       >
-        Create Account
+        {signUpLoading ? <Spinner /> : "Create Account"} 
       </Button>
       <Text
         color="text.subtitle"