Courses

Livewire 3 From Scratch: Practical Course

wire:loading Indicator

Summary of this lesson:
- Using wire:loading directive
- Adding loading indicators
- Managing loading opacity states
- Targeting specific loading actions

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...

The full lesson is only for Premium Members.
Want to access all 30 lessons of this course? (108 min read)

You also get:

  • 69 courses (majority in latest Laravel 11)
  • Premium tutorials
  • Access to repositories
  • Private Discord