Livewire preloader page

<div>

    <div x-data="{ loading: false }" x-on:livewire:navigate.window="loading = true"
        x-on:livewire:navigated.window="loading = false">
        <!-- Preloader -->
        <div x-show="loading" x-transition.opacity
            class="fixed inset-0 z-[9999] flex items-center justify-center bg-white">
            <div class="w-12 h-12 border-4 border-gray-300 border-t-primary-600 rounded-full animate-spin"></div>
            <span class="ml-3 text-gray-600">Loading...</span>
        </div>


    </div>


</div>

<div 
    x-data="{
        loading: true,
        showLoader() {
            this.loading = true;
        },
        hideLoader() {
            setTimeout(() => this.loading = false, 500); 
        }
    }" 
    x-on:livewire:navigating.window="showLoader()" 
    x-on:livewire:navigated.window="hideLoader()" 
    x-cloak
>
    <div 
        x-show="loading" 
        x-transition.opacity 
        class="fixed inset-0 z-50 flex items-center justify-center bg-white/70 dark:bg-gray-900/70"
    >
        <div class="preloader bg-gray-500/50 absolute inset-0 z-50">
            <div class="flex items-center justify-center w-screen h-screen">
                <img src="{{ url('assets/loading.gif') }}" alt="Loading...">
            </div>
        </div>
    </div>
</div>