Persist auth spinner (#503)

app/(auth)/login/page.tsx

@@ -14,6 +14,7 @@ export default function Page() {
   const router = useRouter();
 
   const [email, setEmail] = useState('');
+  const [isSuccessful, setIsSuccessful] = useState(false);
 
   const [state, formAction] = useActionState<LoginActionState, FormData>(
     login,
@@ -28,6 +29,7 @@ export default function Page() {
     } else if (state.status === 'invalid_data') {
       toast.error('Failed validating your submission!');
     } else if (state.status === 'success') {
+      setIsSuccessful(true);
       router.refresh();
     }
   }, [state.status, router]);
@@ -47,7 +49,7 @@ export default function Page() {
           </p>
         </div>
         <AuthForm action={handleSubmit} defaultEmail={email}>
-          <SubmitButton>Sign in</SubmitButton>
+          <SubmitButton isSuccessful={isSuccessful}>Sign in</SubmitButton>
           <p className="text-center text-sm text-gray-600 mt-4 dark:text-zinc-400">
             {"Don't have an account? "}
             <Link

app/(auth)/register/page.tsx

@@ -14,6 +14,8 @@ export default function Page() {
   const router = useRouter();
 
   const [email, setEmail] = useState('');
+  const [isSuccessful, setIsSuccessful] = useState(false);
+
   const [state, formAction] = useActionState<RegisterActionState, FormData>(
     register,
     {
@@ -30,6 +32,7 @@ export default function Page() {
       toast.error('Failed validating your submission!');
     } else if (state.status === 'success') {
       toast.success('Account created successfully');
+      setIsSuccessful(true);
       router.refresh();
     }
   }, [state, router]);
@@ -49,7 +52,7 @@ export default function Page() {
           </p>
         </div>
         <AuthForm action={handleSubmit} defaultEmail={email}>
-          <SubmitButton>Sign Up</SubmitButton>
+          <SubmitButton isSuccessful={isSuccessful}>Sign Up</SubmitButton>
           <p className="text-center text-sm text-gray-600 mt-4 dark:text-zinc-400">
             {'Already have an account? '}
             <Link

components/custom/submit-button.tsx

@@ -6,24 +6,32 @@ import { LoaderIcon } from '@/components/custom/icons';
 
 import { Button } from '../ui/button';
 
-export function SubmitButton({ children }: { children: React.ReactNode }) {
+export function SubmitButton({
+  children,
+  isSuccessful,
+}: {
+  children: React.ReactNode;
+  isSuccessful: boolean;
+}) {
   const { pending } = useFormStatus();
 
   return (
     <Button
       type={pending ? 'button' : 'submit'}
-      aria-disabled={pending}
+      aria-disabled={pending || isSuccessful}
-      disabled={pending}
+      disabled={pending || isSuccessful}
       className="relative"
     >
       {children}
-      {pending && (
+
+      {(pending || isSuccessful) && (
         <span className="animate-spin absolute right-4">
           <LoaderIcon />
         </span>
       )}
+
       <span aria-live="polite" className="sr-only" role="status">
-        {pending ? 'Loading' : 'Submit form'}
+        {pending || isSuccessful ? 'Loading' : 'Submit form'}
       </span>
     </Button>
   );