Refactor: Optimize Captcha Loading

index.html

@@ -24,6 +24,9 @@
     <!-- Cloudflare Turnstile - Preconnect for faster captcha loading -->
     <link rel="dns-prefetch" href="https://challenges.cloudflare.com">
     <link rel="preconnect" href="https://challenges.cloudflare.com" crossorigin>
+    <link rel="modulepreload" href="https://challenges.cloudflare.com/turnstile/v0/api.js" as="script">
+    <link rel="dns-prefetch" href="https://cloudflare.com">
+    <link rel="preconnect" href="https://cloudflare.com" crossorigin>
     
     <!-- Uppy CSS for photo upload functionality -->
     <link href="https://releases.transloadit.com/uppy/v3.25.3/uppy.min.css" rel="stylesheet">

src/components/auth/TurnstileCaptcha.tsx

@@ -77,7 +77,7 @@ export function TurnstileCaptcha({
     if (loading) {
       const timeout = setTimeout(() => {
         setLoading(false);
-      }, 10000); // 10 second timeout
+      }, 5000); // 5 second timeout
       return () => clearTimeout(timeout);
     }
   }, [loading]);
@@ -95,13 +95,18 @@ export function TurnstileCaptcha({
 
   return (
     <div className={`space-y-3 ${className}`}>
-      <div className="flex flex-col items-center min-h-[65px]">
+      <div className="flex flex-col items-center">
+        {loading && (
+          <div className="w-[300px] h-[65px] flex items-center justify-center border border-dashed border-muted-foreground/30 rounded-lg bg-muted/10 animate-pulse">
+            <span className="text-xs text-muted-foreground">Loading CAPTCHA...</span>
+          </div>
+        )}
+        
         <div 
-          className="transition-opacity duration-300"
+          className="transition-opacity duration-100"
           style={{ 
-            visibility: loading ? 'hidden' : 'visible',
+            display: loading ? 'none' : 'block',
-            opacity: loading ? 0 : 1,
+            opacity: loading ? 0 : 1
-            height: loading ? 0 : 'auto'
           }}
         >
           <Turnstile
@@ -121,13 +126,6 @@ export function TurnstileCaptcha({
             }}
           />
         </div>
-        
-        {loading && (
-          <div className="flex items-center justify-center p-4 border border-dashed border-muted-foreground/30 rounded-lg bg-muted/20">
-            <RefreshCw className="w-4 h-4 animate-spin mr-2 text-muted-foreground" />
-            <span className="text-sm text-muted-foreground">Loading CAPTCHA...</span>
-          </div>
-        )}
       </div>
 
       {error && (