From 7d51320364142e6395b398d0c2ae517b9f11a4fb Mon Sep 17 00:00:00 2001
From: Ray Okamoto <22254748+rayokamoto@users.noreply.github.com>
Date: Tue, 20 Feb 2024 01:15:34 +1030
Subject: [PATCH] feat: add button loading to indicate request in progress
 (#89)

---
 src/app/(account)/forgot-password/page.tsx | 27 ++++++++++++++++++--
 src/app/(account)/join/steps/StepOne.tsx   | 29 ++++++++++++++++++++--
 src/app/(account)/signin/page.tsx          | 16 +++++++++++-
 3 files changed, 67 insertions(+), 5 deletions(-)

diff --git a/src/app/(account)/forgot-password/page.tsx b/src/app/(account)/forgot-password/page.tsx
index 8ae61a10..827f43fb 100644
--- 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
index 020c16f7..dac2928f 100644
--- 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 () => {
@@ -153,7 +172,13 @@ export default function StepOne() {
                     name="password"
                 />
                 <div className="mt-8">
-                    <Button colour="orange" width="w-full" type="submit" size="small">
+                    <Button
+                        colour="orange"
+                        width="w-full"
+                        type="submit"
+                        size="small"
+                        loading={emailJoinLoading}
+                    >
                         Continue
                     </Button>
                 </div>
diff --git a/src/app/(account)/signin/page.tsx b/src/app/(account)/signin/page.tsx
index c8b5745b..2866e001 100644
--- 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 () => {
@@ -112,7 +120,13 @@ export default function SignInPage() {
                             >
                                 Forgot password?
                             </Link>
-                            <Button type="submit" colour="orange" width="w-full" size="small">
+                            <Button
+                                type="submit"
+                                colour="orange"
+                                width="w-full"
+                                size="small"
+                                loading={signInLoading}
+                            >
                                 Sign In
                             </Button>
                         </form>