Is there a `phx-click-loading` equivalent for the `.link` component?

Questions & Help Questions
,
1

I like using phx-click-loading on buttons to provide visual feedback that something is happening. I found that this doesn’t work on .link components though. Is there a work-around?

I’m aware of phx-page-loading but I want the styling applied to the link that was clicked.

2

Turns out this is pretty trivial with a hook:

  Link: {
    mounted() {
      this.el.addEventListener("click", () => {
        // Don't apply if opening in a new tab or window.
        if (e.ctrlKey || e.shiftKey || e.metaKey || e.button !== 0) {
          return;
        }
        this.el.classList.add("phx-click-loading");
      });
    },
  },

Only downside is that hooks require the element to be defined with an ID, which can be kind of tedious. Would be convenient if this were the default behavior

Edit: Updated snippet to not trigger on middle click / open in new tab.

Edit 2: Also worth mentioning that I think this approach is a bit hacky as it relies on the fact that the class being applied will get wiped out when the server responds.