Retry Pattern
Menambahkan retry flow yang mengembalikan error UI ke loading state sebelum menampilkan hasil baru.
Tujuan belajar
- Menjelaskan retry sebagai flow state, bukan hanya button
- Memindahkan UI dari error ke loading lalu success
- Membuat Retry button yang memanggil action yang jelas
Isi lesson
5 blok- 1.Retry harus membuat UI jujur selama percobaan baru berjalanBelum selesaiWajib
- 2.Retry dari error ke loading lalu successBelum selesaiWajib
- 3.Gunakan retry saat user memang bisa mencoba ulangBelum selesaiWajib
- 4.Coding practiceBelum selesaiWajib
- 5.RingkasanBelum selesaiWajib
Retry harus membuat UI jujur selama percobaan baru berjalan
WajibButton “Coba lagi” bukan sekadar cara untuk menyembunyikan error. Saat user menekan retry, UI perlu kembali memberi status loading. Setelah percobaan selesai, barulah UI pindah ke success, empty, atau error lagi. Flow ini membantu user memahami bahwa aplikasi benar-benar mencoba proses baru.
Di practice ini, kita mensimulasikan request dengan timer kecil. Fokusnya bukan membuat data-fetching production, tetapi membaca urutan state yang dialami user: error, loading, lalu success.
Bagian ini memengaruhi progres lesson.
Retry dari error ke loading lalu success
Wajibfunction handleRetry() {
setStatus("loading");
window.setTimeout(() => {
setStatus("success");
}, 600);
}
if (status === "loading") {
return <LoadingMessage label="Memuat ulang lesson..." />;
}
if (status === "error") {
return <ErrorMessage onRetry={handleRetry} />;
}Setelah retry dipilih, error lama tidak lagi ditampilkan sebagai seolah proses masih gagal. UI berpindah ke loading sampai hasil percobaan baru tersedia.
Bagian ini memengaruhi progres lesson.
Tips
WajibGunakan retry saat user memang bisa mencoba ulang
Retry cocok untuk kegagalan sementara, misalnya koneksi atau request yang belum berhasil. Jangan menawarkan retry untuk masalah yang butuh action lain, seperti akses ditolak atau form yang belum valid. Copy button harus menjelaskan action, misalnya “Coba lagi” atau “Muat ulang lesson”.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususTambahkan retry ke lesson feed
Latihan membuat flow retry dari error ke loading lalu success dengan komponen loading dan error kecil.
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- Retry adalah perubahan flow dari error ke loading lalu hasil baru.
- Loading perlu terlihat kembali selama percobaan ulang berjalan.
- Retry hanya ditawarkan saat user memang dapat mencoba action yang sama lagi.
- Error message dan retry action sebaiknya dipisah menjadi component yang bisa dipakai ulang.
- Berikutnya, Uji Kompetensi menggabungkan seluruh UI state dalam satu feature kecil.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Retry harus membuat UI jujur selama percobaan baru berjalan.