Avoid delay in aura handler init method

Question

I have an aura handler defined in the component:

<aura:attribute name="ErrorMessage" type="String" default=""/>
    <aura:handler name="init" action="{!c.doinit}" value="{!this}"/>

Controller Class:

doinit : function(component, event, helper) {
        var action = component.get("c.checkrecord");
        action.setParams({
            "primaryCampaignId": component.get("v.recordId")
        });
        action.setCallback(this,function(response){
            var state = response.getState();
            if(component.isValid() && state == "SUCCESS"){ 
                var responseParse =response.getReturnValue();
                if(responseParse != 'SUCCESS'){
                    var fordialog = component.find("searchBlock");
                    $A.util.toggleClass(fordialog, "toggle");
                  //  $A.util.addClass(fordialog, 'slds-hide');
                //  $A.util.removeClass(fordialog, 'slds-show');
                    component.set("v.ErrorMessage", 'Please Add to this List');
                }
                else
                    console.log(responseParse);
            }else{
                console.log(state);
            }
        });
        $A.enqueueAction(action); 
    },

There is a delay where the toggleclass fires, so basically, I can see something displayed and suddenly it gets hidden. When the component is being loaded, users are seeing some block which is disappearing because of the code condition statements.

I do have aura:waiting and done:waiting events, but still, the block shows for a second and disappear since I am hiding it based on the response. Can I use something to delay so the doinit finishes and then the user doesn't see the block or any kind of loading spinner?

Answer 1

I recommend to use a spinner. Its always better for the user to see a spinner when something is loading.

Answer 2

I have always found aura:waiting event tough to use. It means that there is an active server call waiting for a response (not necessarily from your component), not that your component is doing some client side processing or being initialized. I think the best option is to wrap your conditional markup in an aura:if with either {!v.someVar != null} (if you are getting a value from the server) or use your own Boolean that gets set to true in your server callback. In the <aura:set attribute="else"> clause you can place a spinner, stencil, or other loading text.