2

In the init() function of my Lightning component

<aura:component>
    <aura:handler name="init" value="{!this}" action="{!c.init}" />

    <c:spinner aura:id="spinner" />
       ....
    </c:spinner>
</aura:component>

I am chaining multiple Apex callbacks by using the Promise pattern described here

({
    init: function(cmp, evt, helper) {
        cmp.find("spinner").show();

        helper.asPromise(cmp, helper.doThisFirst)
            .then($A.getCallback(function() {
                return helper.asPromise(cmp, helper.doThisSecond)
            }))
            .then($A.getCallback(function() {
                return helper.asPromise(cmp, helper.doThisThird)
            }))
            .then($A.getCallback(function() {
                cmp.find("spinner").hide();
            }));
    }
});

But the spinner is never showing up although the callbacks need several seconds to come back.

1 Answer 1

2

It might be highly related to the following issue, if you are trying to select a html element in your c:spinner: component.find().getElement never accessible.

So as a solution you might get around this with using the render event to trigger your spinner. It's important to use a thingsAreRendered flag, since the renderer is called whenever you do any changes in your component.

<aura:component>
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <aura:handler name="render" value="{!this}" action="{!c.rendered}" />
    <aura:attribute name="thingsAreRendered" type="Boolean" default="false" />
</aura:component>

Controller:

({
    init: function(cmp, evt, helper) {
        cmp.find("spinner").show();

        helper.asPromise(cmp, helper.doThisFirst)
            .then($A.getCallback(function() {
                ....

                cmp.set("v.thingsAreRendered", true);
            }))
            .then($A.getCallback(function() {
                cmp.find("spinner").hide();
            }));
    },


    rendered: function(cmp, evt, helper) {
        if( !cmp.get("v.thingsAreRendered") {
            cmp.find("spinner").show();
        }
    },
});

You must log in to answer this question.

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