How to differentiate clicked button in form from others?

I think you’re going to have to use a client side hook or get fancy with JS commands here.

The simplest non-hook approach I can come up with is:

def click do
  %JS{}
  |> JS.remove_class("clicked", to: "button") # Will remove `clicked` class from all buttons
  |> JS.add_class("clicked") # Add `clicked` class to clicked button
end

Then add phx-click={click()} to the appropriate buttons and target in CSS with:

.phx-submit-loading.clicked .icon {
  display: block;
}

This will leave the clicked class on the button even after loading. Not super clean but also not a big deal if you target properly in CSS (it’s more of a “last clicked” class).

You could also use a client-side hook and put it somewhere where it will apply to all buttons if that is what you’re after.

Yeah, that is a good workaround, thanks for the tip I will use it in my project

It still sucks. I mean, AFAIK, LiveView knows exactly the button that was clicked, it could, for example, add phx-submit-loading to all buttons inside the form, but also add phx-click-loading to the button that was clicked.

It does already add the phx-click-loading class to a button that is outside a form.

Gah, I gotta reread the docs, I wasn’t aware of phx-click-loading. I guess you could just put some sort of no-op click on the buttons you want this to apply to. You could always request it get added (or something similar to it). I think it’s far more common to have a global loader in conjunction with phx-disable-with so my guess is that it just hasn’t come up yet.

I just opened a issue to see if they can add that, let’s see what the devs say

Unless we’re unaware of it and you already can, it would actually be nice to be able to add a temporary class with some variant of phx-disable-with. Though having phx-click-loading is probably enough.

Oh, for sure, that would be even better, I would even go further and add options to customize all the phx-* classes in some way.

Now that you mentioned phx-disable-with, that confirmed to me that LiveView does know what button was clicked since it will only apply that attribute change to the clicked button, not the others

Oh, weird, I tested before I answered and thought it applied to all. Though I actually only looked for the disabled attribute and nothing else but ya, of course that makes sense it only applies to the one, haha. Since that’s the case you can actually do what you want now with:

[phx-disable-with] .loader-icon {
  /* ... */
}

Oh, actually.. I talked too soon… I forgot to add the phx-disable-with to my other button

It does apply to all of them

Ah ok, I thought so but was tired of spinning up Phoenix apps to check