Provide an option to suppress hx-indicator

[silverwind]

hx-indicator currently provides no way to suppress it for specific elements, e.g. to achieve showing a loading indicator by default, but don't show it for specific elements.

It would be nice if hx-indicator="none" or similar would be supported to not add the htmx-request class to a specific element. I think this is a better solution than to force the user to do the suppression via CSS, which is currently the only option.

[wxiaoguang]

Agree, this is important for pages which need to refresh flawlessly (without showing any loading indicator when reloading).

---

At the moment, htmx insists to find something to add the loading indicator:

• If no "hx-indicator": the loading indicator class is added to current element
• If using a non-existing selector for "hx-indicator": htmx outputs a lot of error messages in console because nothing is matched.

[Telroshan]

Hey, I'm not sure I fully understand the issue, could you maybe provide a code example of your situation?
By default, the htmx-request class won't do anything except if the hx-indicator element or any of its children has a .htmx-indicator child.
If you don't want to show it for specific elements, then you'd simply have to not add a htmx-indicator-classed child to it, and let the element itself being used at the indicator target (default behavior), which would result in no display at all, despite the htmx-request class still being added.
I don't get why you'd have to "do the suppression via CSS here" instead of simply not adding an indicator in here, unless your usecase is more intricate?
Let me know!

[wxiaoguang]

What do you think about the case in #2515 (comment) ? We have this:

<div hx-get="..." hx-trigger="every 5s"`>
  a lot of elements ...
</div>

The purpose is to make the page refresh every 5 seconds. We need to make the page reload without the indicator, to make it flawless (no flickering) to end users.

[Telroshan]

Oh ok so to make sure I understand; a parent element with a huge child content that itself may contain indicators at various places, thus when the parent element gets the htmx-request class added, it makes all the child indicators visible ?

If that's the case, as a way to work around it for now, you may define this page-refreshing hx-get on a separate element, as the hx-indicator by default is the element that triggered the request, so you could do something like

<div id="pageContent">
    a lot of elements ...
</div>
<div hx-get="..." hx-trigger="every 5s" hx-target="#pageContent"></div>

Or as a child, would also work

<div>
    <div hx-get="..." hx-trigger="every 5s" hx-target="closest div"></div>
    a lot of elements ...
</div>

This way, the htmx-request isn't added to the top element anymore, but on that dummy element that doesn't have any child anyway ; the behavior is still the same, and you don't need to add any extra CSS to do the suppression that the OP mentioned

[wxiaoguang]

Thank you, it seems to be a feasible approach, but using an extra/empty element seems counter-intuitive .....

[Telroshan]

using an extra/empty element seems counter-intuitive

Totally understandle, it's a bit of a "hack" given your situation indeed.
Though, having a hx-indicator="none" value here would cause other issues in your case, as hx-indicator is inherited thus would disable all indicators on your child elements by default, and would require you to specify each indicator to re-enable manually, so now really an ideal solution either!

[oliverhaas]

using an extra/empty element seems counter-intuitive

Totally understandle, it's a bit of a "hack" given your situation indeed. Though, having a hx-indicator="none" value here would cause other issues in your case, as hx-indicator is inherited thus would disable all indicators on your child elements by default, and would require you to specify each indicator to re-enable manually, so now really an ideal solution either!

I have the same use-case as @wxiaoguang, and I think having hx-indicator="none" would make sense, but I tend to always set my hx-indicator explicitely anyway. Actually for me the default behavior ("this", more or less) is not an ideal choice...

Anyway, I'm going with the workaround as mentioned, but I prefer to let the logic stay on the actual element, and have an additional element just eat the .htmx-request. Maybe that will help someone coming here.

<div hx-get="..." hx-trigger="every 5s" hx-indicator="find .htmx-indicator-sink">
    <div class="htmx-indicator-sink"></div>
    <!--a lot of elements here...-->
</div>

[kynrai]

Came across this issue where a parent form has a hx-indicator to show a spinner when the form is submitted, however the form input fields had inline validation on change. This caused the form to refresh on each key stroke
disinheirt does not seem to work so @oliverhaas solution worked well, it would be nice to have a clean solution to this