Loading State
Menampilkan status loading yang jujur dan reusable saat content belum siap ditampilkan.
Tujuan belajar
- Menjelaskan tujuan loading state
- Membuat LoadingMessage reusable dengan status accessibility dasar
- Membedakan loading dari empty dan error state
Isi lesson
6 blok- 1.Loading memberi tahu bahwa proses masih berlangsungBelum selesaiWajib
- 2.LoadingMessage yang bisa dipakai ulangBelum selesaiWajib
- 3.Jelaskan apa yang sedang disiapkanBelum selesaiWajib
- 4.Coding practiceBelum selesaiWajib
- 5.Cek pemahamanBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
Loading memberi tahu bahwa proses masih berlangsung
WajibSaat content belum siap, UI tidak boleh terlihat seperti halaman rusak atau daftar yang benar-benar kosong. Loading state memberi tahu bahwa aplikasi sedang menyiapkan sesuatu dan user tidak perlu menebak apakah action mereka berhasil.
Loading bukan data kosong dan bukan error. Ia adalah keadaan sementara sebelum content, error, atau empty result diketahui. Pesan singkat yang spesifik biasanya lebih berguna daripada spinner tanpa konteks.
Bagian ini memengaruhi progres lesson.
LoadingMessage yang bisa dipakai ulang
Wajibfunction LoadingMessage({ label }: { label: string }) {
return (
<p role="status" aria-live="polite">
{label}
</p>
);
}
function LessonPanel({ isLoading }: { isLoading: boolean }) {
if (isLoading) {
return <LoadingMessage label="Memuat daftar lesson..." />;
}
return <p>Lesson siap ditampilkan.</p>;
}`role="status"` dan `aria-live="polite"` membantu teknologi bantu mengenali perubahan status tanpa memotong fokus user. Component menerima label agar pesan tetap sesuai konteks feature.
Bagian ini memengaruhi progres lesson.
Tips
WajibJelaskan apa yang sedang disiapkan
Pilih pesan seperti “Memuat daftar lesson...” atau “Menyiapkan pengaturan...” daripada hanya “Loading”. Jangan tampilkan loading tanpa batas untuk error yang sudah diketahui. Saat proses gagal, pindahkan UI ke error state dengan informasi dan tindakan berikutnya.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususBuat LoadingMessage reusable
Latihan membuat loading component dengan label spesifik dan status accessibility dasar.
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.
Cek pemahaman
WajibJawab duluCek pemahaman singkat
Kapan loading state paling tepat ditampilkan?
Progres lesson naik setelah jawaban benar.
Ringkasan
Wajib- Loading state menjelaskan bahwa proses masih berlangsung.
- Pesan loading sebaiknya menyebut content atau action yang sedang disiapkan.
- Loading berbeda dari empty result dan error.
- role status dan aria-live polite memberi feedback accessibility dasar.
- Berikutnya, kamu akan membuat error state yang membantu user pulih dari kegagalan.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Loading memberi tahu bahwa proses masih berlangsung.