It’s common to have a loading indicator show up when we’re waiting for the server response.

To do that, embed an element with class htmx-indicator into the element that triggers the request.

You can use a simple loading... text:

<button 
  hx-get='/data' 
  hx-swap='innerHTML' 
  hx-target='#data'>
  Load fresh data
  <p class='htmx-indicator'>loading...</p>
</button>

Or an image:

<button 
  hx-get='/data' 
  hx-swap='innerHTML' 
  hx-target='#data'>
  Load fresh data
  <img class='htmx-indicator' src='/spinner.gif' />
</button>

Lessons in this unit: