Latihan 1 dari materi Indikator Loading di HTMX — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Kode awal punya tombol <button hx-get="/api/data">Load Data</button>, <span id="spinner">Loading...</span>, dan <div id="result">. Biarkan semuanya, lalu:
hx-target="#result" di tombol, supaya balasannya masuk ke #result, bukan mengganti tulisan tombolnya.hx-indicator="#spinner" di tombol yang sama, supaya selama request berjalan class htmx-request dipasang di spinner itu.class="htmx-indicator". CSS bawaan htmx menyembunyikannya saat diam dan memunculkannya selama request berjalan.Yang dicek:
<button> punya hx-get persis /api/data, hx-target persis #result, dan hx-indicator persis #spinner.<span id="spinner"> punya class persis htmx-indicator, tanpa class lain.hx-indicator dan htmx-indicator di luar komentar.Di pratinjau, htmx menyembunyikan spinner ber-class htmx-indicator sampai ada request. Klik mengirim GET /api/data, yang dijawab 404 dengan cepat, jadi spinner-nya cuma berkedip. Mau melihatnya lebih lama? Tambahkan <template id="contoh-balasan" data-delay="1000"><p>Data siap</p></template>. Template itu gak dinilai.
