Animation example

        
        <div class="relative">
    <div class="absolute z-10 top-0 left-0 w-full h-full flex flex-col items-center bg-white bg-opacity-90 rounded p-8 xl:p-12" wire:loading.flex>
        <div class="animate-spin text-black dark:text-gray-700 mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12">
            <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
          </svg>
        </div>
    </div>
    {{ if (entries | length)  > 0 }}
    <div 
        class="relative z-1 grid grid-cols-1 lg:grid-cols-2 gap-8 transition-opacity duration-700"
        x-data="{ loading: false }"
        x-init="
            $wire.on('filter-updated', () => {
                loading = true;
            });
            $wire.on('entries-updated', () => {
                setTimeout(() => {
                    loading = false;
                }, 100);
            });
        "
    >
        {{ entries }}
        <div 
            class="flex flex-col bg-gray-100 dark:bg-gray-600 h-full rounded p-2 transition-opacity duration-200"
            x-bind:class="loading ? 'opacity-0' : 'opacity-100'"
            x-bind:style="{transitionDelay: '0.{{index}}s'}"
            wire:key="{{ id }}"
        >
          {{# Entry template #}}
        </div>
        {{ /entries }}
    </div>
    <div class="mt-12 flex justify-center">
        {{ links }}
    </div>
    {{ else }}
    <div class="text-center">
        <div class="text-2xl font-bold mb-4">No results found</div>
        <div class="text-gray-500">Try adjusting your filters.
    </div>
    {{ /if }}
</div>