Hyperlinks loading state

[azmeuk]

Feature Request

I use HTMX to boost web pages loading, i.e htmx only loads the page content instead of letting the browser loading the whole html document (and reload static files). Sometimes on low bandwidth internet connections, loading a page can take time, and now there is no loading indicator from the browser.

I wish I could display a loading indicator on <a> links, like we can already do with buttons.
I don't know how this should/could look though. A temporary icon next to the link? A fading background animation?

What do you think?

Related to #2839

[lubber-de]

Speaking of usual text links, i think the text should remain visible.
As you already suggested yourself, putting a loading indicator next to the link is already possible using a standard FUI active inline loader

<a href="#">See, a loader next to me! <span class="ui mini blue active inline loader"></span></a>

https://jsfiddle.net/lubber/mv4wxb6d/4/

[azmeuk]

Nice. However the way htmx natively works is that it just adds a given (configurable) class to the element that triggers the event.
Could it be feasible to display the loader simply by adding the loading class to the <a>?

[lubber-de]

Sure, with a small css snippet so the .htmx-request class replaces the .active class

.htmx-request.ui.inline.loader {
  display: inline-block;
}

According to https://htmx.org/attributes/hx-indicator/ the link should then look as

<a hx-post="/example" hx-indicator="#spinner" href="#">
	See, a loader next to me! <span id="spinner" class="ui mini blue inline loader"></span>
</a>
<!-- htmx-request class gets added to the span once the link is clicked -->

See
https://jsfiddle.net/lubber/mv4wxb6d/11/

[azmeuk]

To have this behavior for a whole website, this would require to manually add a spinner on all the links, which is not very convenient. I was thinking of this result but simply with a link without an inner span, so it would apply everywhere without effort, and without risking to forget a link here and there:

<a hx-post="/example" hx-indicator="#spinner" href="#">
	See, a loader next to me!
</a>