How to add "lightning spinner" in a lightning component.

Please check my previous post "Crate a lightning component to update record." This post is an example of open a modal to update student detail.
Now, here we want to display a "spinner", when we click on "Save" button. This spinner will be displayed until the back end server side operation will be in process.

To perform the above scenario, fist execute the previous post (Crate a lightning component to update record.) and then add the below line of code in component(UpdateStudent.cmp) and controller(UpdateStudent.Controller.js).

Delta modification on component:

1. Add the below attribute :

<aura:attribute name="Spinner" type="Boolean" default="false" access="global"/>

2. Add below 2 aura:handlers :

<aura:handler event="aura:waiting" action="{!c.showSpinner}"/>

<aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>

3. Now add the below condition under modal body :

<aura:if isTrue="{!v.Spinner}">

      <lightning:spinner variant="brand" size="large"/>

 </aura:if>

Delta modification on controller:

Now add the below 2 methods under controller (UpdateStudent.Controller.js),

/**
     * @name:    showSpinner      
     * @date:        19 DEC 2017
     * @description: To show the Spinner when anything is in progress status from Server side.
    **/
    showSpinner: function(component, event, helper) {
       component.set("v.Spinner", true);
    },
    
    /**
     * @name:    hideSpinner      
     * @date:        19 DEC 2017
     * @description: To hide the Spinner when all Server side action has been coplelted.
    **/
    hideSpinner : function(component,event,helper){
     component.set("v.Spinner", false);
    },

After successful completion of above update, we can test out spinner functionality. For the same if we click on save button or on the time of initial record value load (edit button click) we will see a spinner as a processing activity.