[Added] Button: Spinner Feature - JS nuButtonLoading() (nuBuilder 4.7.x)

[admin]

We've introduced a handy new JavaScript function that makes your buttons more interactive — perfect for showing users that a background process is running when an action takes a little longer to complete.


JS Function: nuButtonLoading();

button_spinner.gif

What it does:

• Adds a loading spinner to a button when clicked
• Disables the button temporarily to prevent double-clicks or further interaction while the background process is running.
• Optionally re-enables the button automatically after a few second. This is useful for handling timeouts or ensuring the button becomes usable again if the process takes too long.
• Works with buttons that have icons, text, or both

Smart behavior:

• Hides the original icon while the spinner is active
• Cleans up timers and intervals automatically
• Handles buttons being removed from the page mid-process

Why it's useful:

• Great for buttons that trigger nuBuilder procedure calls or long-running processes
• Prevents users from clicking multiple times by mistake
• Improves visual feedback during operations

Example use case

You click a "Execute" button — it shows a spinner and disables itself.
(You can add the code directly to the onclick event of the button)

Code: Select all

nuButtonLoading('myButtonId', true);

Or you can set it to auto-enable after a number of seconds:

Code: Select all

nuButtonLoading('myButtonId', true, 15);

Later, when your process (e.g. a nuBuilder procedure) finishes, you remove the spinner:

Code: Select all

nuButtonLoading('myButtonId', false);