How to use Loading Spinner in Salesforce Lightning Component?

How to use Loading Spinner in the Salesforce Lightning Component?

Definition of Loading Spinner:

Don’t forget to check out:  How Variable Types Operate in the Lightning Component Framework

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.

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

Aura:waiting Event

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

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

<aura:handler event="aura:waiting" action="{!c.waiting}"></aura:handler>
<aura:handler event="aura:doneWaiting" action="{!c.doneWaiting}"></aura:handler>
<aura:attribute name="HideSpinner" type="Boolean" default="true"></aura:attribute>
<aura:renderif istrue="{!v.HideSpinner}">
    <div class="slds-spinner_container">
        <div class="slds-spinner--brand slds-spinner slds-spinner--large" role="alert">
            <span class="slds-assistive-text">Loading, Please Wait...</span>
            <div class="slds-spinner__dot-a"></div>
            <div class="slds-spinner__dot-b"></div>
        </div>
    </div>
</aura:renderif>

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

waiting: function(component, event, helper) {
  component.set("v.HideSpinner", true);
 },
 doneWaiting: function(component, event, helper) {
  component.set("v.HideSpinner", false);
 }