Empty, Loading & Error States
Tiga kondisi yang berbeda untuk tampilan berbasis data async: kosong (fetch berhasil, nol baris), memuat (fetch berjalan), dan gagal (fetch error, dengan retry).
Tiga kondisi, jangan dicampur
Kosong (Empty) berarti permintaan data berhasil tapi hasilnya nol baris — siswa memang belum punya riwayat pembelian. Memuat (Loading) berarti permintaan sedang berjalan dan hasilnya belum diketahui. Gagal (Error) berarti permintaan itu sendiri gagal (jaringan putus, server error) — datanya belum tentu kosong, hanya belum berhasil diambil. Ketiganya butuh tampilan berbeda; menyamakan "gagal" dengan "kosong" akan membuat pengguna mengira mereka memang tidak punya data, padahal masalahnya ada di jaringan dan bisa dicoba lagi.
1. Kosong (Empty)
Dipakai saat fetch sukses tapi tidak ada data untuk ditampilkan. Selalu sertakan satu aksi pemulihan yang jelas (jelajahi katalog, reset filter) — jangan biarkan pengguna mentok di layar kosong tanpa arah.
Belum Ada Paket Try Out
Kamu belum membeli atau mengaktifkan paket latihan ujian apapun.
Paket Tidak Ditemukan
Coba ubah kata kunci pencarian atau reset filter kategori untuk melihat hasil lainnya.
2. Memuat (Loading)
Bungkus kontainer dengan aria-busy="true" dan sertakan teks status tersembunyi visual (role="status" + sr-only) supaya pembaca layar tahu ada proses berjalan, bukan hanya pengguna yang bisa melihat animasi shimmer-nya.
<div aria-busy="true">
<span class="sr-only" role="status">Memuat transaksi…</span>
<AppSkeleton type="circle" />
<AppSkeleton type="text" class-name="w-3/4" />
</div>3. Gagal (Error) dengan Retry
Panel role="alert" dengan pesan spesifik dan tombol "Coba Lagi" yang terhubung ke fungsi refresh() dari composable data — pola ini sudah berjalan di account/purchases.vue lewat komponen AccountError.vue. Salin nada bahasanya: judul singkat ("Gagal memuat data"), bukan pesan generik "Terjadi kesalahan".
Demo langsung — klik tombol di bawah untuk mensimulasikan siklus fetch:
Catatan status: halaman ini Needs Review karena baru pertama kali disusun sebagai gabungan tiga pola yang sebelumnya terpisah (Empty State lama, plus pola loading/error yang belum pernah didokumentasikan) — belum diuji lintas tim seperti halaman Ready lain.