From 1c7efe28c14874e9c5a099237b516d9151361a05 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Wed, 1 Oct 2025 18:28:16 +0000
Subject: [PATCH] Fix Turnstile auto-initialization

---
 src/components/auth/TurnstileCaptcha.tsx | 39 ++++++++++++++++--------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/components/auth/TurnstileCaptcha.tsx b/src/components/auth/TurnstileCaptcha.tsx
index c04b1bc5..7c9abd1f 100644
--- a/src/components/auth/TurnstileCaptcha.tsx
+++ b/src/components/auth/TurnstileCaptcha.tsx
@@ -72,10 +72,15 @@ export function TurnstileCaptcha({
     }
   };
 
-  // Auto-reset on theme changes
+  // Monitor for initialization failures
   useEffect(() => {
-    resetCaptcha();
-  }, [theme]);
+    if (loading) {
+      const timeout = setTimeout(() => {
+        setLoading(false);
+      }, 10000); // 10 second timeout
+      return () => clearTimeout(timeout);
+    }
+  }, [loading]);
 
   if (!siteKey || siteKey === "0x4AAAAAAAk8oZ8Z8Z8Z8Z8Z") {
     return (
@@ -90,15 +95,15 @@ export function TurnstileCaptcha({
 
   return (
     <div className={`space-y-3 ${className}`}>
-      <div className="flex flex-col items-center">
-        {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 className={loading ? 'opacity-0 absolute' : 'opacity-100'}>
+      <div className="flex flex-col items-center min-h-[65px]">
+        <div 
+          className="transition-opacity duration-300"
+          style={{ 
+            visibility: loading ? 'hidden' : 'visible',
+            opacity: loading ? 0 : 1,
+            height: loading ? 0 : 'auto'
+          }}
+        >
           <Turnstile
             key={key}
             ref={turnstileRef}
@@ -110,10 +115,18 @@ export function TurnstileCaptcha({
             options={{
               theme,
               size,
-              tabIndex: 0
+              execution: 'render',
+              appearance: 'always'
             }}
           />
         </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 && (