FluentStack

Loading, Error, Empty, dan Success State

Mode tersedia: dark, light, paper
MasukDaftar
Intermediate · Level 5: JavaScript AdvancedIntermediate55 menitBahasa Indonesia

Loading, Error, Empty, dan Success State

Membuat UI async yang jujur saat data sedang dimuat, kosong, gagal, atau berhasil.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Membedakan loading, error, empty, dan success state
  • Menampilkan status yang jujur untuk user
  • Menghindari UI yang menggantung saat request gagal
JavaScriptUI StateAsync

Isi lesson

6 blok
  1. 1.
    Async UI harus menjawab apa yang sedang terjadiBelum selesaiWajib
  2. 2.
    Empty berbeda dari errorBelum selesaiWajib
  3. 3.
    Empat state dalam flow asyncBelum selesaiWajib
  4. 4.
    Coding practiceBelum selesaiWajib
  5. 5.
    Checklist local appBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

Async UI harus menjawab apa yang sedang terjadi

Wajib

User tidak melihat Promise. User melihat halaman. Karena itu, async code yang baik tidak cukup hanya berhasil di console. UI perlu menjelaskan apa yang terjadi: data sedang dimuat, tidak ada data, data gagal dimuat, atau data berhasil tampil.

Empat state ini membuat app terasa lebih jujur dan tidak membuat user menebak-nebak.

Bagian ini memengaruhi progres lesson.

Catatan penting

Wajib

Empty berbeda dari error

Empty berarti request berhasil, tetapi datanya kosong. Error berarti request atau proses membaca data gagal. Dua kondisi ini perlu pesan yang berbeda karena tindakan user berikutnya juga berbeda.

Bagian ini memengaruhi progres lesson.

Empat state dalam flow async

Wajib
js
async function loadTips() {
  showLoading();

  try {
    const tips = await getTips();

    if (tips.length === 0) {
      showEmpty();
      return;
    }

    showSuccess(tips);
  } catch (error) {
    showError("Tips gagal dimuat.");
    console.error(error);
  }
}

Flow ini selalu memberi state yang jelas: loading saat mulai, empty jika data kosong, success jika data ada, dan error jika proses gagal.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Render async UI states

Latihan menampilkan loading, empty, success, dan error state untuk async operation.

Tujuan awal: Fokus di tab JS.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

6 cek otomatis4 checklist
Belum selesaiBuka practice

Checklist local app

Wajib

Cek local Vanilla JavaScript app kamu:

  • Ada pesan loading saat data mulai diminta.
  • Ada empty state jika request berhasil tetapi data kosong.
  • Ada error state jika request gagal.
  • Ada success state jika data berhasil dirender.
  • User tidak dibiarkan melihat loading selamanya.
  • Console tetap menyimpan detail error untuk debugging.

Checklist ini untuk local project kamu. Tandai selesai setelah kamu benar-benar mengecek behavior di browser.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib
  • Loading state memberi tahu user bahwa proses sedang berjalan.
  • Empty state menjelaskan data kosong tanpa menyebutnya error.
  • Error state menjelaskan kegagalan dengan pesan yang bisa dipahami.
  • Success state menampilkan data saat operasi berhasil.
  • Berikutnya, kamu akan memberi user tindakan retry saat request gagal.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Async UI harus menjawab apa yang sedang terjadi.

Memuat progresReview module