Using Loading Spinner in Salesforce Lightning Component

How to use Loading Spinner in Salesforce Lightning Component?

How to use Loading Spinner in lightning component?

Definition of Loading Spinner :

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 performed that doesn’t immediately complete.

The lightning: spinner tag has a variant attribute that defines the appearance of the spinner. The default color of the spinner is dark blue. If the variant attribute has set to “brand”  the spinner matches the Lightning Design System brand color. Setting variant=”inverse” displays a white spinner.

slds_spinner_brand

 

aura:waiting and aura:donewaiting standard events can be use for controlling the loading spinner.

Aura:waiting Event :

  1. This event indicates that the app is waiting for 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 Event :

  1. This event indicates that the app is done waiting for 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.

In the above video we are using a lightning component that has not implemented aura:waiting and aura:doneWaiting event so here the UI is loading first and the data from the server is loading after a little while.

Here in the above video, we are using a lightning component that has implemented the aura:waiting and aura:doneWaiting event so both the UI and the data from the server is loading together

Snippet of code that should be added to your lightning component to show the spinner. Here we have implemented salesforce lightning design system: 

Javascript controller methods to handle aura:waiting and aura:doneWaiting event :

 

1 Comment
  1. Salesforce | Jeroen Burgers ☁
    Jeroen Burgers ☁ 8 months ago

    Nice article summing up how to work with the spinner, but beware that Aura:RenderIf is deprecated and simply use Aura:If instead. ^Jeroen

Leave a Reply

CONTACT US

We're not around right now. But you can send us an email and we'll get back to you, asap.

Sending

About Us

Forcetalks is a Salesforce collaboration platform for coders & developers, geeks & nerds, consultants & business heads, admins & architects, managers & marketers and of course the business owners. A community where you can learn from, where you can contribute to. For you. For Salesforce. Read More...

Copyright 2019 Forcetalks. All Right Reserved.

Log in with your credentials

or    

Forgot your details?