Cara Menampilkan Loading Indicator dengan HTMX

JagoTekno.com - Saya sedang asyik ngulik Express dan HTMX. Dan terasa menyenangkan karena HTMX seperti magic.

Hal-hal yang terasa malas dikerjakan dengan susah payah kini bisa dilakukan dengan mudah.

Contohnya kali ini saya ingin menampilkan indikator loading saat proses fetching data di server.

Caranya sangat mudah, HTMX memiliki atribut yang bernama hx-indicator.

Atribut ini bisa ditempatkan pada tombol atau tag html yang mengeksekusi fetching data. Di sini saya menggunaakan tag <button> untuk melakukan fetching data.

<button hx-trigger="click" hx-get="/fetchdata" hx-target="#lihatdata" hx-indicator="#loading">Fetch</button>

Kemudian buat tag baru untuk menempatkan loading indicator, bisa berupa text atau gambar.

Di dalam tag tersebut set atribut class="htmx-indicator". Contohnya seperti ini:

<div id="loading" class="htmx-indicator">Loading data...</div>

Sehingga nanti saat tombol Fetch ditekan maka secara otomatis indicator akan aktif dengan menampilkan tulisan Loading data…, dan setelah data sudah tampil maka indicator itu akan otomatis hilang.

Demikian tutorial singkat tentang cara menampilkan indikator loading dengan htmx.

Semoga bermanfaat.