loading spinner

How to use Loading Spinner in lightning component

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.’

loading spinner

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: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

Lightning Loading Spinner Example  :

apex class [contactController.apxc]

  • In above apex class we simply create a @AuraEnabled  method and and return the contact List.

component [sample.cmp]

  • 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]

style  [sample.css]

  • it is recommended that you set the .slds-spinner_container to position:fixed  so that it remains centered in the viewport.
  • zindex property specifies the stack order of an element. so by this css spinner in always on top layer on screen.

TestApp.app

Output-:

loading spinner
This is gif image, so spinner is not moving here.

 

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.

(Visited 31,535 times, 1 visits today)

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

    • use below code in your component css tab:
      .THIS.slds-spinner_container {
      z-index: 10000;
      position: fixed;
      }

  • 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>

Leave a Reply