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 of 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!