Implementing a Spinner in Aura Lightning Components

Question

I'm working on an Aura Lightning component setup consisting of a parent component and two custom child components. When the user clicks the "Filter" button in the parent component, data is passed to the child components, and their controllers are invoked.

I want to add a spinner that displays when the "Filter" button is clicked, indicating that data is being loaded. Once the data loading is complete, the spinner should be hidden to show the loaded data in the child components.

I'm not sure how to set up a spinner in the parent component based on controllers in child components.

Answer 1

Given the "Filter" button is contained within your parent component, you can handle this quite simply using a Spinner that is added on clicking of the button and then Component Events fired from your children components.

In order to track that the children have completed loading their data, you'll need an attribute for each and one for the spinner, such as:

<aura:attribute name="childOneLoaded" type="Boolean" default="true"/>
<aura:attribute name="childTwoLoaded" type="Boolean" default="true"/>
<aura:attribute name="displaySpinner" type="Boolean" default="false"/>

Within your controller logic that handles the onclick action for the "Filter" button, you'll need to set both of these to false and then carry on with the logic you've already built.

Within the child components, once they've completed loading/their internal logic, you'll need to fire a Component Event that the parent will handle. The snippet below uses a custom Component Event called 'doneLoadingEvent'.

var doneLoadingEvent = component.getEvent("doneLoadingEvent");
doneLoadingEvent.setParams({"componentName":"childOne"});
doneLoadingEvent.fire();

In your parent component, you can then handle this event and check if one or both of the children have completed.

<aura:handler name="doneLoadingEvent" event="c:doneLoadingEvent" action="{!c.handleChildLoaded}"/>

handleChildLoaded : function(component, event){
    var componentLoaded = event.getParam("componentName");
    if(componentLoaded == "childOne"){
        component.set("v.childOneLoaded", true);
    } else if(componentLoaded == "childTwo"){
        component.set("v.childTwoLoaded", true);
    }

    //If both children are loaded then remove spinner.
    if(component.get("v.childOneLoaded") && component.get("v.childTwoLoaded")){
        component.set("v.displaySpinner", false);
    }
}