Indicator Display Style Variations

[lesichkovm]

At the moment, the hx-indicator uses the visibility: hidden style. Unlike display: none, the visibility style maintains the element's width, which can be undesirable in certain scenarios. For instance, when used within buttons, the hidden indicator can still occupy space, affecting the button's appearance.

To address this, many developers resort to additional styling like this:

.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline-block;
}

.htmx-request.htmx-indicator {
    display: inline-block;
}

This approach works, but it can be cumbersome and add unnecessary complexity to your stylesheets.

I propose creating variations of the hx-indicator class to offer more flexibility:

• hx-indicator: Retains the current visibility: hidden style.
• hx-indicator-block: Uses display: block.
• hx-indicator-inline: Uses display: inline-block.

This approach provides developers with more control over the indicator's display behavior, making it easier to integrate smoothly into various design contexts.

[Telroshan]

Htmx inserts a few style rules by default for indicators:

htmx/src/htmx.js

Lines 5020 to 5024 in 4177071

	'<style' + nonceAttribute + '>\
	.' + htmx.config.indicatorClass + '{opacity:0}\
	.' + htmx.config.requestClass + ' .' + htmx.config.indicatorClass + '{opacity:1; transition: opacity 200ms ease-in;}\
	.' + htmx.config.requestClass + '.' + htmx.config.indicatorClass + '{opacity:1; transition: opacity 200ms ease-in;}\
	</style>')

These rules just play with the opacity (not visibility) that is animated through a transition, unlike display which cannot be interpolated.
These CSS rules are very basic and are just here to provide a default minimalistic styling to make an indicator be invisible / visible when a request is in-flight.

As you said, is can be undesirable in "certain" scenarios, which is why htmx provides the htmx.config.includeIndicatorStyles property. Setting it to false won't insert any CSS rules, and let you freely define how you want to style your indicators.

htmx.config.includeIndicatorStyles | defaults to true (determines if the indicator styles are loaded).

People might have very different styling desires, and I don't think it's relevant to embed more styling options into htmx itself, as it's not the library's goal. As you showed in your example above, you can quickly define custom CSS rules to customize the indicator's display.

[lesichkovm]

The reason I placed this request actually exresses my frustration exactly with this feature. It took me couple of years to realize I could create custom styling for this, by finding the above solution on the internet, and I avoided using this functionality all together.

Providing sensible defaults for common use cases, like offering hx-indicator-block and hx-indicator-inline classes, wouldn't bloat the library but would drastically improve the developer experience.

By providing these simple, out-of-the-box styling options, HTMX can empower developers to quickly achieve polished results. This change wouldn't restrict customization; it would simply provide a more welcoming and efficient experience for everyone, promoting more consistent and robust HTMX implementations.

[lesichkovm]

Here is the code that needs to be added. I was not able to do a PR, due to the tests requiring configuration and not able to run out of the box.

`<style${nonceAttribute}>
  .${htmx.config.indicatorClass} { opacity: 0; }
  .${htmx.config.requestClass} .${htmx.config.indicatorClass} { opacity: 1; transition: opacity 200ms ease-in; }
  .${htmx.config.requestClass}.${htmx.config.indicatorClass} { opacity: 1; transition: opacity 200ms ease-in; }

  .${htmx.config.indicatorClass}-block { display: none; }
  .${htmx.config.requestClass} .${htmx.config.indicatorClass}-block { display: block; }
  .${htmx.config.requestClass}.${htmx.config.indicatorClass}-block { display: block; }

  .${htmx.config.indicatorClass}-inline { display: none; }
  .${htmx.config.requestClass} .${htmx.config.indicatorClass}-inline { display: inline-block; }
  .${htmx.config.requestClass}.${htmx.config.indicatorClass}-inline { display: inline-block; }
</style>`