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 14,525 times, 78 visits today)

11 comments

Leave a Reply