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:

0:	Introduction
1:	Why htmx
2:	The core idea of htmx
3:	Installing htmx
4:	Doing a GET request
5:	Swap
6:	POST request
7:	Targets
8:	▶︎ Loading indicator
9:	Confirming actions, and prompts
10:	Triggers
11:	Request headers
12:	Response headers
13:	Events
14:	Redirect after request
15:	Send files using htmx.ajax()
16:	Perform something on page load
17:	Conditionally hide HTML elements based on HTMX request status
18:	htmx + Alpine template tag
19:	htmx, include hidden input fields outside of a form
20:	htmx trigger request via JS event