Loading spinner in lightning component

Loading spinner in lightning component

What is Lightning Spinner?

Loading spinner in lightning component

Spinners are CSS loading indicators that should be shown when retrieving data or performing slow computations. lightning:spinner displays an animated spinner image to indicate that a request is loading. This component can be used when retrieving data or performing an operation that takes time to complete.

aura:waiting and aura:donewaiting can be used for controlling the loading spinner.

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.

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.

Lightning Loading Spinner Example :

There are two ways of showing lightning spinner. First is using lightning design system.

Loading Spinner using lightning design system

Loading Spinner Apex class
public class AccountController{
    @AuraEnabled
    public static List <Account> fetchAccounts() {
        //Qyery 10 accounts
        List<Account> accList = [SELECT Id, Name, BillingState, 
                                    Website, Phone from Account LIMIT 10];
        //return list of accounts
        return accList;
    }
}
Loading Spinner Lightning Component
<aura:component controller="AccountController">
    <!--aura handler with waiting and donewaiting events--> 
    <aura:handler event="aura:waiting" action="{!c.showSpinner}"/>
    <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>
    
  	<!--component attributs -->
    <aura:attribute name="spinner" type="boolean" default="FALSE"/>
    <aura:attribute name="accListToDisplay" type="Account[]" />
    
    <!--loading spinner start-->
    <aura:if isTrue="{!v.spinner}">
        <div aura:id="spinnerId" class="slds-spinner_container">
            <div class="slds-spinner--brand  slds-spinner slds-spinner--large slds-is-relative" role="alert">
                <span class="slds-assistive-text">Loading...</span>
                <div class="slds-spinner__dot-a"></div>
                <div class="slds-spinner__dot-b"></div>
            </div>
        </div>
    </aura:if>
    <!-- Loading spinner end-->    
    
    <!-- Account section start-->
    <ui:button label="Fetch Accounts" class="slds-button slds-button--neutral" press="{!c.getAccounts}"></ui:button>
    <h3 class="slds-section-title--divider">Account List</h3>
    
    <!-- iterate all Account by aura:iteration and display in table--> 
    <table class="slds-table slds-table_bordered slds-table_striped slds-table_cell-buffer slds-table_fixed-layout">
        <thead>
            <tr class="slds-text-heading_label">
                <th scope="col"><div class="slds-truncate" title="ID">ID</div></th>
                <th scope="col"><div class="slds-truncate" title="Name">Name</div></th>
                <th scope="col"><div class="slds-truncate" title="BillingState">BillingState</div></th>
                <th scope="col"><div class="slds-truncate" title="Website">Website</div></th>
                <th scope="col"><div class="slds-truncate" title="Phone">Phone</div></th>
            </tr>
        </thead>
        <tbody>
            <aura:iteration items="{!v.accListToDisplay}" var="acc">
                <tr>
                    <th scope="row"><div class="slds-truncate" title="{!acc.Id}">{!acc.Id}</div></th>
                    <td><div class="slds-truncate" title="{!acc.Name}">{!acc.Name}</div></td>
                    <td><div class="slds-truncate" title="{!acc.BillingState}">{!acc.BillingState}</div></td>
                    <td><div class="slds-truncate" title="{!acc.Website}">{!acc.Website}</div></td>
                    <td><div class="slds-truncate" title="{!acc.Phone}">{!acc.Phone}</div></td>
                </tr>
            </aura:iteration>
        </tbody>
    </table>
</aura:component>

We can define different styles for spinners. Refer this link for more details

https://www.lightningdesignsystem.com/components/spinners/

 

Loading Spinner Lightning component javascript controller
({
    getAccounts : function(component, event, helper) {
        //call getAccountsHelper method
        helper.getAccountsHelper(component, event, helper);
    },
    
    // function automatic called by aura:waiting event  
    showSpinner: function(component, event, helper) {
        // make Spinner attribute true for displaying loading spinner 
        component.set("v.spinner", true); 
    },
    
    // function automatic called by aura:doneWaiting event 
    hideSpinner : function(component,event,helper){
        // make Spinner attribute to false for hiding loading spinner    
        component.set("v.spinner", false);
    }
})
Loading Spinner Lightning component helper
({
	getAccountsHelper : function(component, event, helper) {
        //call apex class method
        var action = component.get('c.fetchAccounts');
        action.setCallback(this, function(response) {
            //store state of response
            var state = response.getState();
            if (state === "SUCCESS") {
                //set response value in accListToDisplay attribute on component.
                component.set('v.accListToDisplay', response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    },
})
Loading Spinner Lightning component style
.THIS.slds-spinner_container {  
  z-index: 10000;
  position: fixed;   
}
Loading Spinner Lightning Application
<aura:application extends="force:slds">
    <c:LoadingSpinnerExample/>
</aura:application>

Output will look like this when Fetch account button is clicked:

Loading spinner in lightning component

Loading spinner in lightning component

lightning:spinner example

Loading Spinner using lightning:spinner tag

A lightning:spinner displays an animated spinner image to indicate that a feature is loading. This component can be used when retrieving data or anytime an operation doesn’t immediately complete.

Apex class code will be same. There will be slight difference in Lightning component and client side controller.

lightning spinner Lightning Component
<aura:component controller="AccountController">
    <!--aura handler with waiting and donewaiting events--> 
    <aura:handler event="aura:waiting" action="{!c.showSpinner}"/>
    <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>
    
  	<!--component attributs -->
    <aura:attribute name="accListToDisplay" type="Account[]" />
    
    <!--loading spinner start-->
    <div class="exampleHolder">
        <lightning:spinner aura:id="mySpinner" class="slds-hide"/>
    </div>
    <!-- Loading spinner end-->    
    
    <!-- Account section start-->
    <ui:button label="Fetch Accounts" class="slds-button slds-button--neutral" press="{!c.getAccounts}"></ui:button>
    <h3 class="slds-section-title--divider">Account List</h3>
    
    <!-- iterate all Account by aura:iteration and display in table--> 
    <table class="slds-table slds-table_bordered slds-table_striped slds-table_cell-buffer slds-table_fixed-layout">
        <thead>
            <tr class="slds-text-heading_label">
                <th scope="col"><div class="slds-truncate" title="ID">ID</div></th>
                <th scope="col"><div class="slds-truncate" title="Name">Name</div></th>
                <th scope="col"><div class="slds-truncate" title="BillingState">BillingState</div></th>
                <th scope="col"><div class="slds-truncate" title="Website">Website</div></th>
                <th scope="col"><div class="slds-truncate" title="Phone">Phone</div></th>
            </tr>
        </thead>
        <tbody>
            <aura:iteration items="{!v.accListToDisplay}" var="acc">
                <tr>
                    <th scope="row"><div class="slds-truncate" title="{!acc.Id}">{!acc.Id}</div></th>
                    <td><div class="slds-truncate" title="{!acc.Name}">{!acc.Name}</div></td>
                    <td><div class="slds-truncate" title="{!acc.BillingState}">{!acc.BillingState}</div></td>
                    <td><div class="slds-truncate" title="{!acc.Website}">{!acc.Website}</div></td>
                    <td><div class="slds-truncate" title="{!acc.Phone}">{!acc.Phone}</div></td>
                </tr>
            </aura:iteration>
        </tbody>
    </table>
</aura:component>
lightning spinner javascript controller
({
    getAccounts : function(component, event, helper) {
        //call getAccountsHelper method
        helper.getAccountsHelper(component, event, helper);
    },
    
    // function automatic called by aura:waiting event  
    showSpinner: function(component, event, helper) {
        // remove slds-hide class from mySpinner
        var spinner = component.find("mySpinner");
        $A.util.removeClass(spinner, "slds-hide");
    },
    
    // function automatic called by aura:doneWaiting event 
    hideSpinner : function(component,event,helper){
        // add slds-hide class from mySpinner    
        var spinner = component.find("mySpinner");
        $A.util.addClass(spinner, "slds-hide");
    }
})

We can have different type of spinner. Refer to below official link for more details lightning spinner

Other similar posts related to lightning components

Salesforce Lightning Interview Questions

 

Permanent link to this article: http://www.sfdcpoint.com/salesforce/loading-spinner-in-lightning-component/