function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion

Adding Loading animation popup or page to buttons.

I want to add the Loading animation to all of my buttons while salesforce is thinking but hasn't processed and loaded the next page:


Just like when you Click save on a case, Upload an attachment, etc.


You can do this by adding an onclick handler to your buttons.  Then in javascript, find the buttons you are interested (or all buttons) and change their 'value' field to 'Loading' or similar.  I'd suggest you also set disabled to true, so that the user can't click on them again. 


If you are talking about just a loading icon, this does it:


<apex:commandButton value="Go" action="{!yourActionMethod}" status="stat"/> ... <apex:actionStatus id="stat"> <apex:facet name="start"> <img src="YourLoadingIcon(animation gif)"> </apex:facet> </apex:actionStatus>


See more information about apex:actionStatus.


As bob_buzzard said, it is a best practice to avoid multiple-clicks during SFDC is doing something and disabling buttons is one of the solution. In that case, you can use apex:actionStatus onStart/Stop attribute to call your javascript function to disable buttons when the call starts and to enable buttons when the call is completed.


onClick is nothing related to action method callout, so it can't know when the call is completed. That's where apex:actionStatus comes.


Of course, I assume you are talking about VF pages and buttons/links which call action methods.





Or do this:

<apex:actionStatus id="stat"> <apex:facet name="start"> <img src="YourLoadingIcon(animation gif)"> </apex:facet> <apex:facet name="stop"> <apex:commandButton value="Go" action="{!yourActionMethod}" status="stat"/> </apex:facent> </apex:actionStatus>

when button is clicked it is replaced with the animation so user can't accidently click it again.