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");
    }
})