From 8fb7c5c988ec2a321c7bb8946265fc3be1ec1c21 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 10 Oct 2025 15:40:21 +0000
Subject: [PATCH] Refactor: Optimize Captcha Loading

---
 index.html                               |  3 +++
 src/components/auth/TurnstileCaptcha.tsx | 24 +++++++++++-------------
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index e98bcf59..95501ad4 100644
--- a/index.html
+++ b/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">
diff --git a/src/components/auth/TurnstileCaptcha.tsx b/src/components/auth/TurnstileCaptcha.tsx
index 7b020dba..f3735b59 100644
--- a/src/components/auth/TurnstileCaptcha.tsx
+++ b/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',
-            opacity: loading ? 0 : 1,
-            height: loading ? 0 : 'auto'
+            display: loading ? 'none' : 'block',
+            opacity: loading ? 0 : 1
           }}
         >
           <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 && (