<div x-data="{ mypreloader2: false }" x-on:hide-preloader.window="mypreloader2 = false">
 </div>
 
 
 
 
 @script
    <script data-navigate-once>
       
        $wire.on('hide-preloader', (getdata) => {

            window.dispatchEvent(new CustomEvent('hide-preloader'))
        }, {
            once: true
        });
    </script>
    @endscript

Here is the full explanation in simple terms so you understand exactly what each part does.

✅ 1. Alpine Component

<div x-data="{ mypreloader2: false }" x-on:hide-preloader.window="mypreloader2 = false"> </div>

🔍 What this means:

x-data="{ mypreloader2: false }"

• This creates an Alpine component.
• It has one variable:

• mypreloader2 = false
• This variable controls whether the preloader is shown or hidden.

x-on:hide-preloader.window="mypreloader2 = false"

• This tells Alpine:

“When a browser event named hide-preloader is fired, set mypreloader2 = false.”

Why .window?

• It listens at the window level.
• This allows events dispatched from outside Alpine (like from Livewire) to be caught.

So when the browser receives:

window.dispatchEvent(new CustomEvent('hide-preloader'))

→ Alpine will run:

mypreloader2 = false

→ preloader hides.

✅ 2. Script Section

@script <script data-navigate-once> $wire.on('hide-preloader', (getdata) => { window.dispatchEvent(new CustomEvent('hide-preloader')) }, { once: true }); </script> @endscript

🔍 What this means:

$wire.on('hide-preloader', ...)

• This listens for Livewire event from your backend.
• Example:

$this->dispatch('hide-preloader');

When Livewire receives that, it triggers this JavaScript function.

window.dispatchEvent(new CustomEvent('hide-preloader'))

• This sends a browser event called hide-preloader.
• Alpine is already listening for this event (from step 1).

So it becomes:

1. Laravel (backend) dispatches → Livewire event
2. Livewire event triggers → JavaScript
3. JavaScript broadcasts → browser event
4. Alpine receives → mypreloader2 = false
5. Preloader hides

🧠 Summary (Easy Version)

Backend → Frontend → Alpine