Belajar Livewire - Loading, Polling & Offline States

#Pendahuluan

Aplikasi yang baik memberi tahu user apa yang sedang terjadi. Ketika user menekan tombol simpan, tidak ada yang lebih membingungkan daripada layar yang diam — apakah kliknya diterima? Aplikasi macet? Livewire menyediakan tool untuk menjawab pertanyaan itu: wire:loading untuk menampilkan indikator selama request, wire:poll untuk memperbarui data secara berkala, dan indikator offline ketika koneksi terputus.

Mengapa ini penting? Karena di Livewire, aksi server berjalan asynchronously. Tanpa feedback visual, user bisa menekan tombol dua kali, membiarkan halaman apa adanya, atau salah menilai aplikasi rusak. Feedback yang baik juga mencegah double-submit.

#wire:loading: Indikator Saat Request Berjalan

wire:loading menampilkan elemen selama ada request Livewire yang berjalan:

Spinner saat aksi berjalan

<button wire:click="save">
    Simpan
</button>
 
<div wire:loading>
    Menyimpan...
</div>

Selama request save() diproses, div dengan wire:loading muncul; saat selesai, ia disembunyikan otomatis. Ini adalah cara dasar memberi feedback.

#wire:target: Menargetkan Aksi Spesifik

wire:loading tanpa target muncul pada semua request. Untuk menautkan indikator ke aksi tertentu, gunakan wire:target:

Loading khusus per aksi

<button wire:click="save">
    Simpan
</button>
<button wire:click="export">
    Export
</button>
 
<div wire:loading wire:target="save">
    Menyimpan data...
</div>
 
<div wire:loading wire:target="export">
    Membuat file export...
</div>

Modifier yang sering dikombinasikan:

wire:loading.attr="disabled" — menonaktifkan tombol selama request, mencegah double-click.
wire:loading.class="opacity-50" — menambah class CSS saat loading.
wire:target="save, export" — beberapa target sekaligus.
wire:target="save" bisa dipasang langsung di tombol yang sama.

Contoh paling berguna — tombol yang menampilkan spinner di dalam dirinya sendiri:

Tombol dengan spinner internal

<button type="submit" wire:click="save" wire:loading.attr="disabled">
    <span wire:loading.remove>Simpan</span>
    <span wire:loading>Menyimpan...</span>
</button>

wire:loading.remove melakukan kebalikannya: elemen tampil saat tidak ada request. Dengan kombinasi keduanya, label tombol berganti sesuai status.

Tip

Pola anti double-submit yang wajib: wire:loading.attr="disabled" pada tombol submit. Tanpa ini, user yang tidak sabar bisa menekan dua kali dan form ter-submit dua kali — di form pembayaran, ini bencana.

#Skeleton Loading untuk Data

Untuk area konten yang dimuat dari server, skeleton lebih halus daripada spinner berputar:

Skeleton saat memuat data

<div wire:loading wire:target="posts">
    <div class="animate-pulse space-y-2">
        <div class="h-4 bg-gray-200 rounded"></div>
        <div class="h-4 bg-gray-200 rounded w-3/4"></div>
        <div class="h-4 bg-gray-200 rounded w-1/2"></div>
    </div>
</div>
 
<div wire:loading.remove wire:target="posts">
    @foreach ($this->posts as $post)
        <p>{{ $post->title }}</p>
    @endforeach
</div>

Kombinasi wire:loading (muncul saat loading) + wire:loading.remove (muncul saat selesai) memberi transisi yang mulus antara placeholder dan konten asli.

#wire:poll: Auto-Refresh Data

wire:poll membuat komponen me-refresh dirinya ke server secara berkala:

Polling default (tiap 2 detik)

<div wire:poll>
    <h1>Pesanan baru: {{ $orderCount }}</h1>
</div>

Polling tiap 5 detik

<div wire:poll.5s>
    <!-- data live -->
</div>

Skenario yang cocok: daftar pesanan, antrian job, status notifikasi. Setiap interval, Livewire mengirim request dan merender ulang — tanpa reload halaman. Pola ini "cukup" untuk data yang tidak butuh real-time ketat; untuk data milidetik, pertimbangkan WebSocket/Echo (di luar cakupan series ini).

#Offline Indicator

Koneksi terputus, request gagal — user harus tahu. @livewire offline directive menampilkan elemen saat browser offline:

Indikator offline

<div class="hidden">
    @livewire('offline')
    <div class="fixed top-0 inset-x-0 bg-red-600 text-white text-center py-2">
        Kamu sedang offline. Periksa koneksi internetmu.
    </div>
</div>

@livewire('offline') memberitahu Livewire untuk menampilkan blok di dalamnya hanya saat koneksi hilang. Tambahan baik: pada event online, Livewire otomatis mencoba request yang gagal — jadi data bisa "mengejar" setelah koneksi pulih.

Warning

wire:poll yang agresif (interval sangat pendek) pada banyak komponen bisa membanjiri server dengan request. Gunakan interval realistis (5-30 detik) dan kombinasikan dengan lazy loading (episode 14) agar komponen yang tidak terlihat tidak ikut polling.

#Pitfall Umum

wire:loading tanpa target muncul di semua request: hasilnya indikator berkedip karena request tak terkait. Selalu targetkan.
Tombol submit tanpa disabled saat loading: risiko double-submit.
Polling terlalu agresif: beban server naik. Interval realistis + lazy loading.
Indikator offline di layout non-Livewire: directive @livewire hanya berfungsi di halaman yang memuat @livewireScripts.

#Penutup

Inti yang harus dibawa pulang:

wire:loading menampilkan elemen selama request; wire:target menautkannya ke aksi spesifik.
wire:loading.attr="disabled" mencegah double-submit; wire:loading.remove untuk swap label.
Skeleton (placeholder) lebih halus daripada spinner untuk area konten.
wire:poll.5s untuk auto-refresh berkala; kombinasikan dengan lazy loading.
@livewire('offline') memberi tahu user saat koneksi putus.

Di episode 17 selanjutnya kita akan membahas nesting & reusable components — komponen di dalam komponen, passing parameter, wire:key untuk list, serta membangun komponen reusable dengan slots dan props. Sampai jumpa di episode 17!