I have a parent custom component which loads child custom components dynamically to create a non linear interview/wizard process.

The child component has aura:valueInit method:

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

Which fires this method:

doInit : function(cmp, event, helper) {
    // do other stuff

The parent component uses this method to dynamically load the child:

injectComponent: function (cmp, name) {

    var target = cmp.find('main');

    $A.createComponent(name, {
        "aura:id" : "activeScreen",
        "model" :  this.model(cmp)
    }, function (contentComponent, status, error) {
        if (status === "SUCCESS") {
            console.log('injectComponent: SUCCESS');
            target.set('v.body', [contentComponent]);
        } else if (status === "INCOMPLETE") {
            console.log("No response from server or client is offline.")
        } else if (status === "ERROR") {
            throw new Error(error);

And injectComponent is called from here:

    Promise.all([savePromise]).then(function(values) {
        var next = self.getNextScreen(cmp, model);
        self.injectComponent(cmp, next);

But when I call injectComponent it stalls, and the component does not render until I click somewhere on the screen.

Here is an example of the console log:

enter image description here

Notice the 10 second gap between injectComponent and doInit

Why is this happening?

  • 1
    What code do you call injectComponent from?
    – Keith C
    Jun 13, 2018 at 21:24

1 Answer 1


I fixed it by adding $A.getCallback( after the .then

Promise.all([savePromise]).then($A.getCallback(function(values) {
    self.injectComponent(cmp, next);

For further info:

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.