Spinner in lightning component salesforce

 

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.

1. This event indicates that the app is waiting for the response to a server request.
2. This event is fired before aura:doneWaiting.
3. This event is automatically fired when a server-side action is added using $A.enqueueAction().
4. The aura:waiting event is handled by a client-side controller.
5. 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.

1. This event indicates that the app is done waiting for the response to a server request.
2. This event is fired after aura:waiting.
3. This event is automatically fired if no more response from the server is expected.
4. 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");

    }

})