Latihan 2 dari materi Suspense & Lazy di React — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Tiru tiga keadaan lazy loading dengan state.
loaded dan loading (keduanya mulai false), fungsi handleLoad, dan <button id="load">Muat Komponen</button>. Biarkan begitu.loaded dan loading false), tampilkan <p id="placeholder">Klik tombol untuk memuat</p>.loading true, tampilkan <p id="fallback">Sedang memuat...</p>.loaded true, tampilkan <div id="lazy-content">Komponen Berhasil Dimuat!</div>, dan #placeholder gak tampil lagi.useState sudah tersedia di editor. Baris import boleh ditulis seperti di proyek sungguhan, tapi gak wajib. Kalau kamu menambah jeda dengan setTimeout supaya fallback-nya terlihat, buat singkat, misalnya 300 ms: hasilnya dicek kurang dari sedetik setelah klik.
Yang dicek:
#placeholder berisi persis Klik tombol untuk memuat.#load diklik, #lazy-content berisi persis Komponen Berhasil Dimuat!, dan #placeholder gak ada lagi.id="fallback".
