Empty State
Membuat empty state yang menjelaskan mengapa list kosong dan memberi langkah berikutnya yang relevan.
Tujuan belajar
- Membedakan empty state dari loading dan error
- Menulis empty message yang spesifik terhadap konteks
- Memberi next action saat user belum memiliki data
Isi lesson
5 blok- 1.List kosong tetap membutuhkan desainBelum selesaiWajib
- 2.EmptyState dengan action yang relevanBelum selesaiWajib
- 3.Checklist empty state yang membantuBelum selesaiWajib
- 4.Coding practiceBelum selesaiWajib
- 5.RingkasanBelum selesaiWajib
List kosong tetap membutuhkan desain
WajibEmpty state muncul ketika proses berhasil, tetapi belum ada data untuk ditampilkan. Ini bukan halaman tanpa isi. User perlu tahu apa yang kosong, apakah kondisi itu normal, dan apa yang dapat dilakukan berikutnya.
Untuk daftar lesson tersimpan, empty state bisa menjelaskan bahwa belum ada lesson yang disimpan lalu menawarkan action untuk menambahkan contoh atau kembali memilih lesson. Hindari pesan generik yang tidak memberi arah seperti “Tidak ada data”.
Bagian ini memengaruhi progres lesson.
EmptyState dengan action yang relevan
Wajibfunction EmptyState({ onCreate }: { onCreate: () => void }) {
return (
<section>
<h2>Belum ada lesson tersimpan</h2>
<p>Simpan satu lesson untuk mulai membuat daftar belajar pribadi.</p>
<button type="button" onClick={onCreate}>
Tambahkan contoh lesson
</button>
</section>
);
}Judul menyebut apa yang kosong. Paragraf menjelaskan kondisi tanpa menyalahkan user. Button memberi action yang langsung membantu list berpindah ke content state.
Bagian ini memengaruhi progres lesson.
Catatan penting
WajibChecklist empty state yang membantu
Sebutkan area yang kosong. Jelaskan apakah kondisi itu normal. Beri satu action yang relevan bila user memang bisa melanjutkan. Jangan memakai CTA yang tidak berhubungan, dan jangan menampilkan empty state ketika aplikasi sebenarnya masih loading atau mengalami error.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususBuat EmptyState yang membantu
Latihan membuat empty state dengan konteks daftar kosong dan action untuk memulai content pertama.
Tujuan awal: Fokus di tab TSX.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Ringkasan
Wajib- Empty state muncul setelah proses berhasil tetapi tidak ada data.
- Pesan perlu menyebut apa yang kosong dan mengapa user melihatnya.
- Action empty state harus relevan dengan langkah berikutnya user.
- Empty bukan loading dan bukan error.
- Berikutnya, kamu akan menghubungkan error state dengan retry flow yang jujur.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: List kosong tetap membutuhkan desain.