Completing a parent component's initialization without waiting for child component

Question

I have a parent component "P" created dynamically on the load of a visualforce page. One child component "C" is referred inside the parent. Some actions are fired on the load of both parent and child components, individually through their doInit functions. So, the sequence is

1. Parent component loads
2. Child component loads
3. Parent's doInit is called
4. Child's doInit is called
5. Page is rendered successfully only when bothe the doInit calling is completed.

However, the details displayed on the child component can be delayed in displaying. Any suggestions to achieve this ?

Answer 1

Your understanding appears to be incorrect. Assuming C is defined in markup in P, then C's doInit will be called before P's doInit. If you want to force P to go first, you can add an extra render cycle with aura:if:

<aura:attribute name="showChild" type="Boolean" default="false" />
...
<aura:if isTrue="{!v.showChild}">
  <c:C />
</aura:if>

However, you'll also want to make sure there's a delay so the rendering can catch up. The parent's doInit should look like:

doInit: function(component, event, helper) {
  helper.initialize(component); // Do any logic for P.
  setTimeout(
    $A.getCallback(
      function() {
        component.set("v.showChild", true);
      }
    )
  );
}

The delay caused by setTimeout will allow a render cycle to complete and P's content will be displayed before C is ready.