Imagine you have big data that needs to be loaded into a table. Besides the Lazy Loading component, another method uses wire:loading
directive which has a bit more features.
First, add a div
element with the wire:loading
directive above the table.
resources/views/livewire/products.blade.php:
<div class="space-y-6"> <div class="space-x-8"> // ... </div> <div class="text-red-600" wire:loading>Loading...</div> <div class="min-w-full align-middle"> // ... </div> {{ $products->links() }}</div>
Simulate longer loading by adding sleep(1)
to the Livewire component render
method. Then try to search, and you should see a...