From 592a91e3fa6380397bb94bf83392345c76df3af0 Mon Sep 17 00:00:00 2001
From: TinaH <tinahammar@gmail.com>
Date: Mon, 13 Jan 2025 15:32:16 +0100
Subject: [PATCH] lazy load assets and avoid push scripts

---
 .../views/components/turnstile.blade.php      | 33 +++++++------------
 1 file changed, 12 insertions(+), 21 deletions(-)

diff --git a/resources/views/components/turnstile.blade.php b/resources/views/components/turnstile.blade.php
index 9f1319c..04a1423 100644
--- a/resources/views/components/turnstile.blade.php
+++ b/resources/views/components/turnstile.blade.php
@@ -10,10 +10,11 @@
 <x-dynamic-component :component="$fieldWrapperView" :field="$turnstile">
 
     <div x-data="{
-            state: $wire.entangle('{{ $statePath }}').defer 
+            state: $wire.entangle('{{ $statePath }}').defer
         }"
-        wire:ignore
-        x-init="(() => {
+         wire:ignore
+         x-load-js="['https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onloadTurnstileCallback']"
+         x-init="(() => {
             let options= {
                 callback: function (token) {
                     $wire.set('{{ $statePath }}', token)
@@ -31,26 +32,16 @@
             resetCaptcha = () => {
                 turnstile.reset($refs.turnstile)
             }
+
+            $wire.on('reset-captcha', () => resetCaptcha())
         })()"
     >
         <div data-sitekey="{{config('turnstile.turnstile_site_key')}}"
-            data-theme="{{ $theme }}"
-            data-language="{{ $language }}"
-            data-size="{{ $size }}"
-            x-ref="turnstile"
-            >
+             data-theme="{{ $theme }}"
+             data-language="{{ $language }}"
+             data-size="{{ $size }}"
+             x-ref="turnstile"
+        >
         </div>
     </div>
-
-    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onloadTurnstileCallback" defer></script>
-
-    @push('scripts')
-        <script>
-            document.addEventListener('livewire:init', () => {
-                Livewire.on('reset-captcha', (event) => {
-                    resetCaptcha()
-                })
-            })
-        </script>
-    @endpush
-</x-dynamic-component>
\ No newline at end of file
+</x-dynamic-component>