The loading-states
extension allows you to easily manage loading states while a request is in flight, including disabling elements, and adding and removing CSS classes.
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: