By Adding Loading Icon on the page for an AJAX Request ( ActionFunction, CommandButton)
It’s always good to add a loading icon on the page when you are processing something on the server side (calling an apex method ) so a user can understand that something is running in the background. Following code snippet can be used along with your apex:actionFunction or apex:commandButton.
In Classic
[html]
<apex:actionStatus id="actionStatus">
<apex:facet name="start" >
<img src="/img/loading.gif" />
</apex:facet>
</apex:actionStatus>
[/html]
In Lightning Experience
[html]
<apex:actionStatus id="actionStatus">
<apex:facet name="start" >
<div class="slds-spinner_container">
<div class="slds-spinner–brand slds-spinner slds-spinner–small" aria-hidden="false" role="alert">
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</div>
</apex:facet>
</apex:actionStatus>
[/html]
Using ActionStatus in CommandButton
[xml]
<apex:commandButton value="Save" action="{!Save}" status="actionStatus"/>
[/xml]
Happy Coding 🙂
By Naveen Sharma
December 8, 2017Thanks for explaining the Action status.
For Fancy Action status in classic-
We need to add following css classes in your VF page code.
#contentLoading{
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 10001;
text-align: center;
}
#contentLoading1{
position: absolute;
top:300px;
z-index: 10000;
}
JavaScript function to start and stop action status –
function onLoadingStatus(vl){
if(vl)
document.getElementById(“loadingdiv”).style.display=””;
else
document.getElementById(“loadingdiv”).style.display=”none”;
}
function loading(val) {
if (val) {
document.getElementById(‘contentLoading’).style.display = ‘inline-block’;
//document.getElementById(‘contentLoaded’).style.display = ‘none’;
}
else {
document.getElementById(‘contentLoading’).style.display = ‘none’;
//document.getElementById(‘contentLoaded’).style.display = ‘inline-block’;
}
}
And finally add action status tag in your VF page-
Example Button –
Thanks!