feat: add button loading to indicate request in progress (#89)

compsci-adl · Feb 19, 2024 · 6792f5b · 6792f5b
1 parent 3746e05
commit 6792f5b
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 5 deletions.
diff --git a/src/app/(account)/forgot-password/page.tsx b/src/app/(account)/forgot-password/page.tsx
@@ -45,8 +45,14 @@ export default function ForgotPasswordPage() {
         resolver: zodResolver(resetPasswordSchema),
     });
 
+    const [sendCodeLoading, setSendCodeLoading] = useState(false);
+    const [resetPasswordLoading, setResetPasswordLoading] = useState(false);
+
     const handleSendCode = sendCodeForm.handleSubmit(async ({ email }) => {
         if (!isLoaded) return;
+
+        setSendCodeLoading(true);
+
         try {
             const result = await signIn.create({
                 strategy: 'reset_password_email_code',
@@ -70,10 +76,15 @@ export default function ForgotPasswordPage() {
                 },
             ]);
         }
+
+        setSendCodeLoading(false);
     });
 
     const handleResetPassword = resetPasswordForm.handleSubmit(async ({ code, password }) => {
         if (!isLoaded) return;
+
+        setResetPasswordLoading(true);
+
         try {
             const resetResult = await signIn.attemptFirstFactor({
                 strategy: 'reset_password_email_code',
@@ -105,6 +116,8 @@ export default function ForgotPasswordPage() {
                 },
             ]);
         }
+
+        setResetPasswordLoading(false);
     });
 
     return (
@@ -120,7 +133,12 @@ export default function ForgotPasswordPage() {
                                 control={sendCodeForm.control}
                                 name="email"
                             />
-                            <Button colour="orange" width="w-[19rem] md:w-[25rem]" type="submit">
+                            <Button
+                                colour="orange"
+                                width="w-[19rem] md:w-[25rem]"
+                                type="submit"
+                                loading={sendCodeLoading}
+                            >
                                 Send Code
                             </Button>
                         </form>
@@ -145,7 +163,12 @@ export default function ForgotPasswordPage() {
                                 control={resetPasswordForm.control}
                                 name="code"
                             />
-                            <Button colour="orange" width="w-[19rem] md:w-[25rem]" type="submit">
+                            <Button
+                                colour="orange"
+                                width="w-[19rem] md:w-[25rem]"
+                                type="submit"
+                                loading={resetPasswordLoading}
+                            >
                                 Reset Password
                             </Button>
                         </form>

diff --git a/src/app/(account)/join/steps/StepOne.tsx b/src/app/(account)/join/steps/StepOne.tsx
@@ -31,8 +31,13 @@ function VerifyEmail() {
 
     const { isLoaded, signUp, setActive } = useSignUp();
 
+    const [verifyEmailLoading, setVerifyEmailLoading] = useState(false);
+
     const handleVerify = form.handleSubmit(async ({ code }) => {
         if (!isLoaded) return;
+
+        setVerifyEmailLoading(true);
+
         try {
             const completeSignUp = await signUp.attemptEmailAddressVerification({
                 code,
@@ -53,13 +58,20 @@ function VerifyEmail() {
                 },
             ]);
         }
+
+        setVerifyEmailLoading(false);
     });
 
     return (
         <div className="mt-4">
             <form onSubmit={handleVerify}>
                 <ControlledField label="Code" control={form.control} name="code" />
-                <Button colour="orange" width="w-[19rem] md:w-[25.5rem]" type="submit">
+                <Button
+                    colour="orange"
+                    width="w-[19rem] md:w-[25.5rem]"
+                    type="submit"
+                    loading={verifyEmailLoading}
+                >
                     Verify Email
                 </Button>
             </form>
@@ -88,8 +100,13 @@ export default function StepOne() {
     const { signUp, isLoaded } = useSignUp();
     const [pendingVerification, setPendingVerification] = useState(false);
 
+    const [emailJoinLoading, setEmailJoinLoading] = useState(false);
+
     const handleSignUp = form.handleSubmit(async (formData) => {
         if (!isLoaded) return;
+
+        setEmailJoinLoading(true);
+
         try {
             await signUp.create(formData);
             await signUp.prepareEmailAddressVerification({ strategy: 'email_code' });
@@ -111,6 +128,8 @@ export default function StepOne() {
                 },
             ]);
         }
+
+        setEmailJoinLoading(false);
     });
 
     const handleGoogleSignUp = async () => {
@@ -152,7 +171,12 @@ export default function StepOne() {
                     name="password"
                 />
                 <div className="mt-8 flex justify-center space-x-4">
-                    <Button colour="orange" width="w-[19rem] md:w-[25.5rem]" type="submit">
+                    <Button
+                        colour="orange"
+                        width="w-[19rem] md:w-[25.5rem]"
+                        type="submit"
+                        loading={emailJoinLoading}
+                    >
                         Continue
                     </Button>
                 </div>

diff --git a/src/app/(account)/signin/page.tsx b/src/app/(account)/signin/page.tsx
@@ -6,6 +6,7 @@ import FancyRectangle from '@/components/FancyRectangle';
 import { useSignIn } from '@clerk/clerk-react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import Link from 'next/link';
+import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { FcGoogle } from 'react-icons/fc';
 import { z } from 'zod';
@@ -25,8 +26,13 @@ export default function SignInPage() {
         resolver: zodResolver(signInSchema),
     });
 
+    const [signInLoading, setSignInLoading] = useState(false);
+
     const handleSignIn = form.handleSubmit(async ({ email, password }) => {
         if (!isLoaded) return;
+
+        setSignInLoading(true);
+
         try {
             const result = await signIn.create({
                 identifier: email,
@@ -59,6 +65,8 @@ export default function SignInPage() {
                 },
             ]);
         }
+
+        setSignInLoading(false);
     });
 
     const handleGoogleSignIn = async () => {
@@ -110,7 +118,12 @@ export default function SignInPage() {
                         >
                             Forgot password?
                         </Link>
-                        <Button type="submit" colour="orange" width="w-[19rem] md:w-[25rem]">
+                        <Button
+                            type="submit"
+                            colour="orange"
+                            width="w-[19rem] md:w-[25rem]"
+                            loading={signInLoading}
+                        >
                             Sign In
                         </Button>
                     </form>