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");
            "primaryCampaignId": component.get("v.recordId")
            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');

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?

2 Answers 2


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

  • Hi, Yes I wanted to use the spinner only. But on page-load how I can execute the spinner first because before init function starts, the lightning component gets loaded. I want to initiate the spinner as soon as the component opens. Any specific function in lightning ???Like in JS we have onload or readyfunction
    – Abhik Dey
    Sep 1, 2017 at 16:16
  • Hi, you can define the spinner on your component. And then in the init function you can hide the spinner on your component. I dont there is something like "onload" and "readyfunction". I Hope this helps you.
    – auno
    Sep 4, 2017 at 6:11

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.

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.