The loading-states Extension

This extension allows you to easily manage loading states while a request is in flight, including disabling elements, and adding and removing CSS classes.

Usage

Add the hx-ext="loading-states" attribute to the body tag or to any parent element containing your htmx attributes.

Add the following class to your stylesheet to make sure elements are hidden by default:

[data-loading] {
  display: none;
}

Supported attributes

https://unpkg.com/htmx.org/dist/ext/loading-states.js