10

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 – Caspar Harmer May 18 '17 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. – Caspar Harmer May 18 '17 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. – Robert Sösemann May 18 '17 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 '17 at 18:10
2

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.

  • This wouldn't work for hierarchies of components and I doubt that changing an attribute which always rerender the <aura:if> part – Robert Sösemann May 18 '17 at 9:19
  • if you pass the attributes to the component hierarchy, it should work just fine – Jomtung Jan 16 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.