`htmx-indicator` not working with websockets

[renardeinside]

Example HTML payload:

<button class="btn btn-primary" hx-swap-oob="morph" ws-send="" hx-trigger="click" id="9242596e">
    <span class="htmx-indicator" hx-swap-oob="morph">
        <span class="loading loading-infinity" hx-swap-oob="morph"></span>
    </span>
    <div hx-swap-oob="morph">Click me</div>
</button>

Clicking on the button doesn't trigger the visibility on htmx-indicator.

[M3t0r]

Ignoring some edge-cases and assuming a close will always try to reconnect, I solved this for my use-case with this simple snippet:

<script>
    htmx.on("htmx:wsOpen", (evt) => {
        evt.detail.elt.classList.remove("htmx-request");
    });
    htmx.on("htmx:wsClose", (evt) => {
        evt.detail.elt.classList.add("htmx-request");
    });
</script>