Triggers, forms, and feedback
Show request progress
Reveal a meaningful status while work is in flight and hide it again when the request ends.
8 minute lesson
Point hx-indicator at a meaningful status element:
<button hx-post="/tasks/42/complete" hx-indicator="#save-status">
Complete
</button>
<span id="save-status" class="htmx-indicator" role="status">
Saving…
</span>While the request is active, HTMX adds htmx-request to the selected indicator. Its built-in indicator styles reveal .htmx-indicator; you can provide your own CSS if you need a different presentation.
Use text that explains the operation. A spinner alone does not tell someone whether the page is loading, saving, deleting, or stuck.
An indicator covers only the in-flight state. On success, the returned HTML should show the new task state. On failure, replace “Saving…” with a clear error and retry path rather than simply hiding it.
Throttle the connection in DevTools so the indicator remains visible long enough to inspect. Confirm it appears only for the related request and that the control is not left in a busy state after an error.
Lesson completed