Another common option is a "toast notification" (see android) or other separate confirmation message to acknowledge your action.

"Sent X" or "Finished Y!" is sufficient to distinguish a failed ajax call from a successful button press

Yes but be very careful with those. You don't want to spam the user.

I remember some years ago when Ubuntu file sync would pop a notification every time a file was synced. That's a good example of what not to do.

'hayksaakian mentioned toasts, which are global, but I think another option would be "toasts" local to the button. E.g. flash a checkmark next to the button user clicked for a second, indicating the action was registered and completed. Key here is: next to, and asynchronous. The checkmark can stay alive for a second, but the button shouldn't be blocked for that time. If the user clicks it again immediately, it should "refresh" the success indicator, or add another one.

UIs in games have this solved in countless of ways.

You don't need a spinner if feedback from clicking the button is sufficiently quick.

According to Google that would be around 100ms.

> Guidelines:

> Process user input events within 50ms to ensure a visible response within 100ms, otherwise the connection between action and reaction is broken. This applies to most inputs, such as clicking buttons, toggling form controls, or starting animations. This does not apply to touch drags or scrolls.

https://developers.google.com/web/fundamentals/performance/r...

That only applies to actions which have an immediate, perceivable effect, which might not be the case for submitting a form, as described in the OP. For example, opening a dropdown, selecting a checkbox or radio button, etc.

In the case of network it's also presupposing that the user's has a low-latency, fast connection--which should basically never be assumed.

Make them solve a reCAPTCHA when clicking on the button. Make sure that the captcha takes at least one second to appear. This will make them feel that something is sent and validated.

Dont use a spinner if it loads fast. One thing I have done is adding a little white box with the word "loading..." In it. Users don't have to wait for any animation to see what it means and it still looks fine for longer loading times.

Showing a static message is not recommended since you can't tell if the application has frozen/crashed. Source: https://www.nngroup.com/articles/progress-indicators/

Spinners are no better than static messages. They're animated GIFs completely detached from the state of the underlying application, so they'll happily keep spinning forever, even though the application itself has locked up or crashed. It's particularly painful on websites, since unlike desktop apps, a bug or failure in one AJAX handler tends to not break everything else - so the site may sort of work, except some actions never finish.

that is the wrong implementation of a spinner

Basically all spinners on the web work by sending a request which causes the spinner to show up, waiting for a response which causes the spinner to be removed. Many of them don't handle errors which causes them to keep spinning.

A static loading message is exactly the same, while the message is on the screen the request is still pending and while it is gone it is not. The only case you are not catching is where the browser locks up and becomes unable to render the spinning which is not that common or useful.

Maybe but it's the common implementation of a spinner.

I can't remember the last time I saw a spinner that actually showed some kind of variable behavior. If you have that, it's more likely you are being shown a progress bar.

You could have a combination of static text and animation. For example "Loading..." where the dots are animated

I use jquery ui "highlight" effect as visual confirmation for action completion. It's a background easing animation, basically it "flashes" before fading out.

It might not be fancy but it's simple and helps.