Turbo charge your HTMX game

HTMX loading strategy is great, but very limited.

Problem

The default HTMX loading behaviour works by marking a DOM element as a loader that remains hidden until the desired request starts. That works fine up until you want a much richer user experience and interaction with other elements.

For example, a button that cancels a form submission. You’ll have to:

  1. show the cancel button once the request starts
  2. hide the action button once the request starts
  3. show the action button once the request ends or is cancelled
  4. hide the cancel button once the request ends or is cancelled

You get 1 and 5 for free by making the cancel button the loading indicator. You’re on your own for the rest, you’ll have to reach for javascript and hook into the HTMX lifecycle, etc to get the rest going.

Solution

I made a tiny custom element that scopes HTMX requests to itself, and decorates any desired element with the idle or submitting state data attribute data-state="submitting" when a request starts.

Code