HTMX hide text and show loading spinner while request in progress

Question

I'm using HTMX and I have a button inside a form that says 'Send' and when the form is submitted a loading spinner appears next to it. I want the 'Send' to disappear and only the loading spinner to be shown while the request is in progress. How can I do that?

<form hx-post="/test">
      <button type="submit">
        <span>Send</span>
        <svg class="htmx-indicator ml-2 animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="black" fill="transparent" stroke-width="4"></circle>
          <path class="opacity-75" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
      </button>
    </div>
  </form>

Answer 1

Here is an example of my button that shows a loading spinner and hides the text when HTMX is making the request.

<button class="flex items-center relative rounded-md bg-slate-50 px-3.5 py-2.5 text-sm font-semibold text-slate-950 shadow-sm" 
    hx-get="/my-route" 
    hx-trigger="click, keyup[code=='Space'] from:body" 
    hx-target="#myContainer" 
    hx-swap="outerHTML swap:0.25s" 
    hx-indicator="#spinner" 
    type="button">
    <svg class="spinner animate-spin" id="spinner" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg>
    <span class="button-text">Click me</span>
</button>

Then, my css

.spinner {
  display: none;
}

.htmx-request .spinner {
  display: inline;
}

.htmx-request.spinner {
  display: inline;
}

.htmx-request.spinner ~ .button-text {
  display: none;
}

Basically, I use the css ~ selector to find the adjacent button text and hide it while the .htmx-request class is added to the actual indicator.