Double-clicks are the default

People double-click everything. They’re so used to it.

If an action takes more than a second to finish and there isn’t a progress indicator, they’ll double-click several times.

Users also frequently don’t notice the browsers’ loading indicator.

Double-clicking can be destructive

Actions done twice can be inconvenient and destructive. For instance, having duplicate orders submitted can be a chore.

So, prevent that from happening and inform the user

A simple way to solve this is to add a loading indicator when on button click.

What I did was make a .loadable class that uses Bootstrap’s button library. A button that has that class would have it’s text changed to “Loading” with a spinner on click.

If it was an AJAX action, it would then reset on ajaxComplete.

An example: