How to block screen on Lightning Component on Loading

Hi,

Here I would like to discuss a way of blocking screen on a lightning component while loading or clicking on a button.

Here is code.

Lightning Component

<aura:component implements="force:lightningQuickAction" >

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

JS Controller:

({

    // function automatic called by aura:waiting event 
    showSpinner: function(component, event, helper) {
        // remove slds-hide class from mySpinner
        var spinner = component.find("mySpinner");
        $A.util.removeClass(spinner, "slds-hide");
    },
   
    // function automatic called by aura:doneWaiting event
    hideSpinner : function(component,event,helper){
        // add slds-hide class from mySpinner   
        var spinner = component.find("mySpinner");
        $A.util.addClass(spinner, "slds-hide");
    }
})

How to deal with Action function & Apex Command Button Together

I have seen many posts where I found newbies are struggling with issues when they call action function from apex:command button. 

I have some points to be considered: 
1. My first recommendation is to avoid calling action function from apex Command Button until unless you have specific requirement to validate some inputs in javascript before hitting the server. 

2. If you have to call action function from command button then please follow below points. 
     2.A) When you use action function and command button then you page gets submitted two times and it causes an issue of setting public properties (bound with Page like setters) to null value. 
     2.B) To resolve this issue use  "return false;" in your onclick event just after calling JS function or action function. 
    2.C) Please go through with below code to see how to do it. 

<apex:page Controller="myController">
<apex:form>
<apex:actionFunction action="{!SaveData}" name="SaveData" reRender="pbId" />
<script>
function Save() {                
SaveData();                                      
}
</script>
<apex:pageBlock id="pbId" >
<apex:commandButton value="Submit" onclick="Save(); return false;" rerender="pbId" />
</apex:form>
</apex:page>