How to use Loading Spinner in lightning component
Last Update : spring 18, 2/11/2018
Update Status : API 38 and above you can use lightning:spinner component to show loading spinner in lightning component. and to show/hide component you can take reference by this post, thanks
Prerequisites : Basic understanding of Lightning Components.
What is Lightning Spinner ?
- Salesforce lightning Spinner is useful while the data being loaded on component body.
- Lightning Spinners is CSS loading indicators that should be display when retrieving data from server or performing slow computations.’
In this sample code we will see that how we can use lightning loading Spinner while the data retrieve from server side controller.
In this example we use aura:waiting and aura:donewaiting standard events for control 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() , or when it’s expecting a response from an Apex controller.
- it’s always fired before aura:doneWaiting event.
- aura:waiting event is handled by a client-side (javaScript)controller.
- A lightning component/application can have only one aura:waiting handler.
For full reference : https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_aura_waiting.htm
<aura:handler event="aura:waiting" action="{!c.jsFunction}"/>
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.
- it’s always fired after aura:waiting.
- aura:doneWaiting event is handled by a javaScript client-side controller.
- a lightning component/application can have only one doneWaiting handler.
For full reference : https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_aura_doneWaiting.htm
<aura:handler event="aura:doneWaiting" action="{!c.jsFunction}"/>
Lightning Loading Spinner Example :
apex class [contactController.apxc]
public class contactController{ @AuraEnabled public static list <contact> fetchContact() { // create a list of Contact List<contact> returnListOfContact = new List<contact>(); // query 100 records from contact object. List <contact> lstOfcon = [Select id,FirstName,LastName from contact LIMIT 100]; // play a for loop on lstOfcon for(contact cc : lstOfcon){ if(cc != null){ returnListOfContact.add(cc); } } // return contact list return returnListOfContact ; } }
- In above apex class we simply create a @AuraEnabled method and and return the contact List.
component [sample.cmp]
<aura:component controller="contactController"> <!-- create 2 aura handler with waiting and donewaiting events--> <aura:handler event="aura:waiting" action="{!c.showSpinner}"/> <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/> <!--create a component attributs --> <aura:attribute name="Spinner" type="boolean" default="false"/> <aura:attribute name="ListOfContact" type="contact[]" /> <!--loading spinner start... style=Brand Medium (blue dots)--> <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--> <!-- contact list start--> <ui:button label="get Contacts" class="slds-button slds-button--neutral" press="{!c.getContactLst}"></ui:button> <h3 class="slds-section-title--divider">Contact List</h3> <!-- iterate all contacts(LastName) by aura:iteration--> <aura:iteration items="{!v.ListOfContact}" var="n"> <ul class="slds-list--dotted"> <li>{!n.LastName}</li> </ul> </aura:iteration> </aura:component>
- In above lightning component first we add Lightning CSS library by using ltng:require tag. you have must use salesforce lightning design CSS for display lightning loading spinner.
How to use lightning design system framework on lightning component ? Click here <–
- Then we are add 2 event handler aura:waiting and aura:doneWaiting. on component.
- When the user click on the get Contact button, a server request create by js controller and aura:waiting event fired automatically . and call the showSpinner function on client side controller.
- showSpinner js function set the spinner attribute to true on component and the loading spinner is display on component body.
- after complete server response aura:doneWaiting event fired automatically and call the hideSpinner function on client side controller.
- hideSpinner function set the spinner attribute to false on component and the loading spinner is hide on component body.
controller [sampleController.js]
({ getContactLst : function(component, event, helper) { //call apex class method var action = component.get('c.fetchContact'); action.setCallback(this, function(response) { //store state of response var state = response.getState(); if (state === "SUCCESS") { //set response value in ListOfContact attribute on component. component.set('v.ListOfContact', response.getReturnValue()); } }); $A.enqueueAction(action); }, // this function automatic call by aura:waiting event showSpinner: function(component, event, helper) { // make Spinner attribute true for display loading spinner component.set("v.Spinner", true); }, // this function automatic call by aura:doneWaiting event hideSpinner : function(component,event,helper){ // make Spinner attribute to false for hide loading spinner component.set("v.Spinner", false); } })
style [sample.css]
.THIS.slds-spinner_container { z-index: 10000; position: fixed; }
- it is recommended that you set the
.slds-spinner_container
toposition:fixed
so that it remains centered in the viewport. - z–index property specifies the stack order of an element. so by this css spinner in always on top layer on screen.
TestApp.app
<aura:application extends="force:slds"> <c:sample/> <!-- here c: is org. namespace prefix--> </aura:application>
Output-:
For full lightning spinner reference : https://www.lightningdesignsystem.com/components/spinners/
Like our facebook page for new post updates.? & Don’t forget to bookmark this site for your future reference.
if you have any suggestions or issue with it, you can post in comment box.
17 comments
This is good solution ,but on the best , since aura waiting will always initiate when ever there is backend action on that whole app where the component is used.
yes, spinner is showing on the server side action but in the above sample you can show/hide the spinner on the client side action also, by the set “isTrue” attribute to true or false
Hi Spinner shaded background is only half the page, how to fill up the shaded background?
use below code in your component css tab:
.THIS.slds-spinner_container {
z-index: 10000;
position: fixed;
}
Very good
Thanks for your valuable feedback @Jigar Trivedi
Hi, Is there any way we can show percentage of loading as well
why it is working fine in app only on desktop but not on mobile ?
very helpful man
Thanks for your feedback @vamsi
Man you are amazing…. Thanks for this. Keep up the good work.
Thnks mate, works like a charm
Hello! as we use this spinner in many scenario’s, is it possible to make it a utility spinner and call it whenever it is needed?
Great article. I have a small problem though. Using your examples I can get the spinner to work correctly when I just load TestApp.app using Preview mode. However if I add the lightning page to an app via Lightning Application Builder the spinner briefly appears & the page stutters between showing the details & a white screen before settling down after about 5 seconds & then working correctly. The major difference I have is that my code is loading its data at page load time (i.e. as part of doInit). Could the loading of other parts of the screen be causing this issue & if it is, is there anything I can do about it? Any suggestions welcome as it’s driving me crazy.
Please ignore my earlier comment as, typically after making a post, I’ve just worked it out! Thought I’d add it here so others might benefit.
Using the new spinner component in my component :-
Adding the following above & below my js controller calls to my apex controller methods :-
& added to helper class:
@piyush soni
You should update this article as aura:waiting/donewaiting has been deprecated as of the Summer ’18 Release – https://releasenotes.docs.salesforce.com/en-us/summer18/release-notes/rn_lc_events.htm
The suggested way to do this is shown below or the solution Andee presented
Hi,
I need to display a message ‘Your report is being generated.’ along with spinner . I have tried with alternative text but it didnt work for me.
<div class=“spinnerHolder”>
<lightning:spinner aura:id=“spinner” alternativeText=“Your report is being generated.” size=“medium” />
</div>