How to disable triggers when component is in a "loading" state?

[aaronbushnell]

Question

I just recently learned of s-indicator to show an indicator when a component is loading a request for visual feedback. What's the recommended way to disable elements (buttons, selects, etc) inside the Sprig/HTMX component during this time to ensure a user is not spamming new requests while waiting for one to complete?

I was hoping for an HTMX/Sprig variable like s-loading="my_loading_class" that applies said class to the element during a loading event.

Perhaps there's a better way/approach for this?

[bencroker]

The attribute is full documented at https://htmx.org/attributes/hx-indicator/

You can change the classes that are applied using the indicatorClass and requestClass config properties as documented at https://htmx.org/api/#config

[aaronbushnell]

Sorry, I might be missing something very obvious but these are settings that modify the indicator, but not the component itself it appears. Here's a screenshot of what I'm hoping to determine.

Adding a class to my indicator is not exactly what I'm looking for. What I'm looking for is some way to disable a user's ability to click these buttons while the XHR is occurring.

[bencroker]

I guess I thought you were looking for a CSS class that you could use to hide the buttons. If you want to manipulate the buttons beyond styling with CSS then you can use one of the htmx events, for example:

<script>
// This should go in the parent template, not the Sprig component.
htmx.on('htmx:beforeRequest', function(event) {
    // Disable buttons.
});
</script>

[aaronbushnell]

Got it, thanks! Wanted to check if there was a Twig-based way to do this. I'll use this method.