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.

  • I'm putting this as a comment as I'm not sure this is exactly what you want. github.com/rapsacnz/LightFrame - hierarchies - yes, events - no ( you get by reference and call a method ) - minimal - yes. Not sure about your point 2 May 18, 2017 at 9:36
  • So I now use a component called Base that I extend. It handles spinners, notifications and server calls (so far). Works great. May 18, 2017 at 9:41
  • @CasparHarmer This works for a single component, but not for hierarchies, right? I need a solution with events that bubble in the component tree. May 18, 2017 at 11:46
  • 2
    @RobertSösemann Can you add more details how the spinner component would/you like it to behave inside hierarchy of components. A small usecase will help us understand what you are looking for.
    – Praveen
    May 19, 2017 at 18:10

1 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" />

Helper Js Code







Call above methods to show & hide spinner.

  • This wouldn't work for hierarchies of components and I doubt that changing an attribute which always rerender the <aura:if> part May 18, 2017 at 9:19
  • if you pass the attributes to the component hierarchy, it should work just fine
    – Jomtung
    Jan 16, 2019 at 21:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.