function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
blakeLLblakeLL 

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.

bob_buzzardbob_buzzard

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. 
ThomasTTThomasTT

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.
 
ThomasTT
 


TehNrdTehNrd
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.