Fix Turnstile auto-initialization

This commit is contained in:
gpt-engineer-app[bot]
2025-10-01 18:28:16 +00:00
parent 92f00bb5ff
commit 1c7efe28c1

View File

@@ -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 && (