refactor(auth): simplify loading state propagation

Replace effect-based sync with direct inline propagation. Children
notify parent via callback when setting loading state. Parent's
setChildLoading is now idempotent to handle redundant calls gracefully.

Author: koistya

apps/app/components/auth/otp-verification.tsx

@@ -26,10 +26,13 @@ export function OtpVerification({
   const [isLoading, setIsLoading] = useState(false);
   const [resendCooldown, setResendCooldown] = useState(0);
 
-  // Sync loading state to parent
-  useEffect(() => {
-    onLoadingChange?.(isLoading);
-  }, [isLoading, onLoadingChange]);
+  const setLoading = useCallback(
+    (loading: boolean) => {
+      setIsLoading(loading);
+      onLoadingChange?.(loading);
+    },
+    [onLoadingChange],
+  );
 
   // Countdown timer for resend cooldown
   useEffect(() => {
@@ -45,7 +48,7 @@ export function OtpVerification({
     if (!email || !otp) return;
 
     try {
-      setIsLoading(true);
+      setLoading(true);
       onError(null);
 
       const result = await auth.signIn.emailOtp({
@@ -71,7 +74,7 @@ export function OtpVerification({
       console.error("OTP verification error:", err);
       onError("Failed to verify code");
     } finally {
-      setIsLoading(false);
+      setLoading(false);
     }
   };
 
@@ -82,7 +85,7 @@ export function OtpVerification({
     onError(null);
 
     try {
-      setIsLoading(true);
+      setLoading(true);
 
       // "sign-in" type handles both login and signup (creates user if needed)
       const result = await auth.emailOtp.sendVerificationOtp({
@@ -99,9 +102,9 @@ export function OtpVerification({
       console.error("Email OTP error:", err);
       onError("Failed to send verification code");
     } finally {
-      setIsLoading(false);
+      setLoading(false);
     }
-  }, [email, onError, resendCooldown]);
+  }, [email, onError, resendCooldown, setLoading]);
 
   const disabled = isDisabled || isLoading;
 

apps/app/components/auth/passkey-login.tsx

@@ -2,7 +2,7 @@ import { auth } from "@/lib/auth";
 import { authConfig } from "@/lib/auth-config";
 import { Button } from "@repo/ui";
 import { KeyRound } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 interface PasskeyLoginProps {
   onSuccess: () => void;
@@ -25,10 +25,13 @@ export function PasskeyLogin({
 }: PasskeyLoginProps) {
   const [isLoading, setIsLoading] = useState(false);
 
-  // Sync loading state to parent
-  useEffect(() => {
-    onLoadingChange?.(isLoading);
-  }, [isLoading, onLoadingChange]);
+  const setLoading = useCallback(
+    (loading: boolean) => {
+      setIsLoading(loading);
+      onLoadingChange?.(loading);
+    },
+    [onLoadingChange],
+  );
   const onSuccessRef = useRef(onSuccess);
   onSuccessRef.current = onSuccess;
 
@@ -71,7 +74,7 @@ export function PasskeyLogin({
       return;
     }
 
-    setIsLoading(true);
+    setLoading(true);
     onError(null);
 
     try {
@@ -96,7 +99,7 @@ export function PasskeyLogin({
       // Network-level failures (offline, DNS, connection refused)
       onError(authConfig.errors.networkError);
     } finally {
-      setIsLoading(false);
+      setLoading(false);
     }
   };
 

apps/app/components/auth/social-login.tsx

@@ -2,7 +2,7 @@ import { auth } from "@/lib/auth";
 import { sessionQueryKey } from "@/lib/queries/session";
 import { Button } from "@repo/ui";
 import { useQueryClient } from "@tanstack/react-query";
-import { useEffect, useState } from "react";
+import { useCallback, useState } from "react";
 
 interface SocialLoginProps {
   onError: (error: string | null) => void;
@@ -21,13 +21,16 @@ export function SocialLogin({
   const queryClient = useQueryClient();
   const [isLoading, setIsLoading] = useState(false);
 
-  // Sync loading state to parent
-  useEffect(() => {
-    onLoadingChange?.(isLoading);
-  }, [isLoading, onLoadingChange]);
+  const setLoading = useCallback(
+    (loading: boolean) => {
+      setIsLoading(loading);
+      onLoadingChange?.(loading);
+    },
+    [onLoadingChange],
+  );
 
   const handleGoogleLogin = async () => {
-    setIsLoading(true);
+    setLoading(true);
     onError(null);
 
     try {
@@ -47,13 +50,13 @@ export function SocialLogin({
       // Handle error result (Better Auth returns { error } instead of throwing)
       if (result?.error) {
         onError(result.error.message || "Failed to sign in with Google");
-        setIsLoading(false);
+        setLoading(false);
       }
       // On success, page redirects - component unmounts, no cleanup needed
     } catch (err) {
       console.error("Google login error:", err);
       onError("Failed to sign in with Google");
-      setIsLoading(false);
+      setLoading(false);
     }
   };
 

apps/app/components/auth/use-auth-form.ts

@@ -53,15 +53,14 @@ export function useAuthForm({
   // Unified busy state: parent loading, child loading, or external loading
   const isDisabled = isLoading || isChildLoading || !!isExternallyLoading;
 
-  // Keyed loading tracker - prevents race when multiple children are mounted
+  // Keyed loading tracker - idempotent to handle redundant calls from children
   const setChildLoading = useCallback((key: AuthChildKey, loading: boolean) => {
     setLoadingChildren((prev) => {
+      const has = prev.has(key);
+      if (loading ? has : !has) return prev; // No logical change
       const next = new Set(prev);
-      if (loading) {
-        next.add(key);
-      } else {
-        next.delete(key);
-      }
+      if (loading) next.add(key);
+      else next.delete(key);
       return next;
     });
   }, []);