Declarative loading indicator

[imbolc]

I couldn't find a html only, declarative way for loading buttons. Suppose, we'd like to disable button and change its text during the request. I've looked at:

• hx-indicator, but it seems to require splitting logic between html and css
• disable-element - doesn't allow to change the button text
• loading-states - has complicated and not intuitive settings, e.g. examples hard to understand without description

So I ended up with a simple extension and I wonder if it has some flaws or could be included into official extensions. Here's the syntax:

Simple disable a control:

<button hx-on-request="disable">Submit</button>

Change control and possible way by simple swapping it:

<button hx-on-request="hide">Submit</button>
<button hx-on-request="show" hidden disabled>Subscribing</button>

Here's the code:

htmx.defineExtension("on-request", {
	onEvent: function (name, evt) {
		let before = "htmx:beforeRequest" == name;
		let after = "htmx:afterRequest" == name;
		if (!before && !after) {
			return;
		}

		let root = evt.detail.elt;
		let attr = "hx-on-request";
		let els = Array.from(root.querySelectorAll(`[${attr}]`));
		if (root.hasAttribute(attr)) {
			els.push(root);
		}

		els.forEach((el) => {
			switch (el.getAttribute(attr)) {
				case "aria-busy":
					el.ariaBusy = before;
					break;
				case "disable":
					el.disabled = before;
					break;
				case "hide":
					el.hidden = before;
					break;
				case "show":
					el.hidden = after;
					break;
				default:
					console.error(`Wrong ${attr} value`, el);
			}
		});
	},
});

[javiermartinez27]

I like this idea, maybe not exactly this implementation since I feel is too verbose having the hx-on-request, hidden and disabled attributes, but it is still better than messing with css/js