1<div
 2    x-data="{ loading: false }"
 3    x-init="
 4        $wire.on('filter-updated', () => {
 5            loading = true;
 6        });
 7        $wire.on('entries-updated', () => {
 8            setTimeout(() => {
 9                loading = false;
10            }, 150);
11        });
12    "
13>
14    {{ if (entries | length)  > 0 }}
15    <div class="grid grid-cols-1 @2xl:grid-cols-2 @5xl:grid-cols-3 @6xl:grid-cols-4 gap-8">
16        {{ entries }}
17        <div
18            class="flex flex-col bg-gray-100 h-full rounded p-4 transition-all duration-300 ease-out"
19            wire:key="{{ id }}"
20            x-data="{ index: {{ index }} }"
21            x-bind:style="`transition-delay: ${loading ? '0ms' : (index * 50) + 'ms'}`"
22            x-bind:class="loading ? 'opacity-0 scale-95 translate-y-4' : 'opacity-100 scale-100 translate-y-0'"
23        >
24            {{# Rest of the entry template #}}
25        </div>
26        {{ /entries }}
27    </div>
28    <div class="mt-12 flex justify-center">
29        {{ links }}
30    </div>
31    {{ else }}
32    <div class="text-center">
33        <div class="text-2xl font-bold mb-4">No results found</div>
34        <div class="text-gray-500">Try adjusting your filters.
35    </div>
36    {{ /if }}
37</div>