Spinners are CSS loading indicators that should be shown when retrieving data or performing any action which take time. lightning:spinner displays an animated spinner image to indicate that a request is loading.
What is aura:waiting and aura:doneWaiting?
aura:waiting : This event is automatically fired when a server side apex action is added using $A.enqueueAction(). This event is always fired before aura:doneWaiting. It is handled by a client-side (javaScript)controller. One component can have only one tag to handle this event.
- This event indicates that the app is waiting for the response to a server request.
- This event is fired before aura:doneWaiting.
- This event is automatically fired when a server-side action is added using $A.enqueueAction().
- The aura:waiting event is handled by a client-side controller.
- A component can have only one <aura:handler> tag to handle this event.
aura:doneWaiting : This event is automatically fired when all server response(apex) complete. aura:doneWaiting indicate that the lightning component is done waiting for server response. This event is always fired after aura:waiting. It is handled by a client-side (javaScript)controller. One component can have only one tag to handle this event.
- This event indicates that the app is done waiting for the response to a server request.
- This event is fired after aura:waiting.
- This event is automatically fired if no more response from the server is expected.
- This event is also handled by a client-side controller.
Lightning Loading Spinner Example :
<aura:component controller="AccountController"> <!--Aura handler with waiting and donewaiting events declare--> <aura:handler event="aura:waiting" action="{!c.showSpinner}"/> <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/> <!--loading spinner start--> <div class="exampleHolder"> <lightning:spinner aura:id="mySpinner" class="slds-hide"/> </div> <!-- Loading spinner end--> <!-- Rest of the code goes here --> </aura:component>
lightning spinner javascript controller
({ // This function automatic called by aura:waiting event showSpinner: function(component, event, helper) { // remove slds-hide class from mySpinner $A.util.removeClass(component.find("mySpinner"), "slds-hide"); }, // This function automatic called by aura:doneWaiting event hideSpinner : function(component,event,helper){ // add slds-hide class to mySpinner $A.util.addClass(component.find("mySpinner"), "slds-hide"); }})
