Display lighting:spinner component during component render cycle

Question

Examples of lightning:spinner usage that I've seen are used for delays in controller logic processing, ie waiting on an asynchronous callout. But what I'm trying to solve for is being able to show the spinner while the actual component markup is rendering.

For example, I have a child component that builds a complex table using nested aura:iteration and aura:if tags, and takes 5-10 seconds for the actual table to be rendered on the page, while the controller logic completes instantly.

I can't figure out how to turn on the spinner at the beginning of the render process, then turn it off after.

My attempt

I tried using two standard event handlers for init and render, which I understood to be fired on either end of the rendering process. I paired lightning:spinner with an <aura:if isTrue="{!v.showSpinner}">, then in each of those handler methods I set showSpinner to true and false, respectively.

component:

<aura:attribute name="showSpinner" type="Boolean" default="true"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:handler name="render" value="{!this}" action="{!c.onRender}"/>

 <aura:if isTrue="{!v.showSpinner}">
    <lightning:spinner variant="brand" alternativeText="Page loading..." aura:id="loadingSpinner"/>
</aura:if>

controller:

doInit: function (component, event, helper) {
    console.log('doinit fired');
    component.set("v.showSpinner", true);
},

onRender: function(component, event, helper){
    console.log('onRender fired');
    component.set("v.showSpinner", false);
},

Outcome

Visually: About 5 seconds pass before the page finishes rendering (during which the SF page framework displays, including the parent lightning component, but the table inside the child component does not), then the table appears. The spinner does not show at all.

Console Log: I expected that onRender wouldn't fire till after the table was displaying, but apparently not, because immediately upon component creation and prior to the table displaying, the following console log lines displayed:

doinit fired 
onRender fired  
onRender fired

Then, immediately after the table finished rendering, onRender fired three more times.

So that explains why the spinner doesn't show. The first onRender fires instantly, turning off the spinner.

What I don't get is why onRender is firing five times during the initial rendering of the table, when the data object that populates the table hasn't been manipulated by code or user entry yet.

How can I ensure that the spinner isn't hidden until after the table component truly finishes rendering? is there a an event other than init that flags the start of any individual render process, since there are clearly several rerenderings on the initial page load?

Answer 1

Using a window.setTimeout() worked for me.

helper.displaySpinner();

window.setTimeout($A.getCallback(function(){
    // Your async code here
    helper.hideSpinner();
}), 1);

Answer 2

Just figured out a way to get my specific situation to work.

My table component is actually a grandchild of the top level parent component. The middle component is created dynamically using $A.createComponent on the grandparent, and the grandchild is inserted statically into the middle component using <c:grandchild_Component>

Instead of trying to control and display the spinner on the middle or grandchild components, I moved it up to the parent component. showSpinner is set to true by default, and the attribute is set to false within the callback function of the $A.createComponent that creates the middle component, like such:

$A.createComponent("c:middle_component", {
                                "aura:id": "step3",
                                },
                                function (childcmp, status, errorMessage) {
                                    if (status === "SUCCESS") {
                                        component.set("v.content", childcmp);
                                        component.set("v.currentStep", 'step3');
                                        console.log('spinner turned off');
                                        component.set("v.showSpinner", false);
                                    } else if (status === "INCOMPLETE") {
                                        console.log("No response from server or client is offline.");
                                    } else if (status === "ERROR") {
                                        console.log("Error: " + errorMessage);
                                    }
                                }
                            );

One peculiarity I've noted in doing this is that the grandchild's init and render methods don't fire until after the callback from it's parent component is completed. I would have thought that $A.createComponent wouldn't be considered complete until all children components of the created components were also created and rendered.