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:

You must log in to answer this question.

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