11

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.

4
  • 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

5

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.

2
  • 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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .