add: loading spinner when submiting form

code100x · Nov 8, 2024 · cd58a83 · cd58a83
1 parent 5629e19
commit cd58a83
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 6 deletions.
diff --git a/src/components/auth/signin.tsx b/src/components/auth/signin.tsx
@@ -22,6 +22,7 @@ import {
 import { useToast } from '../ui/use-toast';
 import { DemarcationLine, GoogleOauthButton } from './social-auth';
 import { PasswordInput } from '../password-input';
+import { LoadingSpinner } from '../loading-spinner';
 
 export const Signin = () => {
   const { toast } = useToast();
@@ -40,10 +41,11 @@ export const Signin = () => {
       const response = await signIn('signin', { ...data, redirect: false });
       if (!response?.ok) {
         const errorMessage =
-          response?.error?.includes('User') && response?.error?.includes('does not exist')
+          response?.error?.includes('User') &&
+          response?.error?.includes('does not exist')
             ? 'User does not exist'
             : response?.error || 'Internal server error';
-  
+
         return toast({
           title: errorMessage,
           variant: 'destructive',
@@ -53,7 +55,7 @@ export const Signin = () => {
         title: 'Login successful! Welcome back!',
         variant: 'success',
       });
-  
+
       const searchParams = new URLSearchParams(window.location.search);
       const redirect = searchParams.get('next') || APP_PATHS.HOME;
       router.push(redirect);
@@ -65,7 +67,7 @@ export const Signin = () => {
       });
     }
   }
-  
+
   return (
     <div className="">
       <Form {...form}>
@@ -114,7 +116,13 @@ export const Signin = () => {
             className="w-full h-10"
             aria-label="submit"
           >
-            {form.formState.isSubmitting ? 'Please wait...' : 'Sign In'}
+            {form.formState.isSubmitting ? (
+              <>
+                <LoadingSpinner className="mr-2 size-5" /> Please wait...
+              </>
+            ) : (
+              'Sign In'
+            )}
           </Button>
           <DemarcationLine />
           <GoogleOauthButton label="Sign in with Google" />

diff --git a/src/components/auth/signup.tsx b/src/components/auth/signup.tsx
@@ -23,6 +23,7 @@ import { useToast } from '../ui/use-toast';
 import { signUp } from '@/actions/auth.actions';
 import { DemarcationLine, GoogleOauthButton } from './social-auth';
 import { PasswordInput } from '../password-input';
+import { LoadingSpinner } from '../loading-spinner';
 
 export const Signup = () => {
   const { toast } = useToast();
@@ -121,7 +122,13 @@ export const Signup = () => {
             className="w-full h-10"
             aria-label="submit"
           >
-            {form.formState.isSubmitting ? 'Please wait...' : 'Create Account'}
+            {form.formState.isSubmitting ? (
+              <>
+                <LoadingSpinner className="mr-2 size-5" /> Please wait...
+              </>
+            ) : (
+              'Create Account'
+            )}
           </Button>
           <DemarcationLine />
           <GoogleOauthButton label="Sign up with Google" />