lightning:spinner solution that finally works (using custom events, not aura:waiting)

Question

Lightning components without a working loading indicator are just not professional.

Too bad that there is not code example out there that seems to work under real-world circumstances.Every blog out there is recommending to use the too generic aura events

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

and the Lightning experts have to explain over and over why this is not a stable solution.

So what I am asking for is a spinner solution that

1. Uses custom component events for showing/hiding the spinner
2. Uses lightning:spinner and not Design system div nightmares
3. Works in hierarchies of components. Child components can ask for a spinner.
4. Needs minimal code. So no 10 lines of CSS in every situation that needs it.

Sharing is caring ;-) I will open a bounty to say thanks for a great solution.

Answer 1

Instead of writing many lines of code, you can achieve with below code.

Component code

 <aura:attribute name="IsSpinner" type="Boolean"/>
      <aura:if isTrue="{!v.IsSpinner}">
       <lightning:spinner variant="brand"  size="large" />
      </aura:if>

Helper Js Code

showSpinner:function(cmp){

  cmp.set("v.IsSpinner",true);

},

 hideSpinner:function(cmp){

  cmp.set("v.IsSpinner",false);

}    

Call above methods to show & hide spinner.