Lightning Aura Components Spinner – Spinner Display Issue: Not Removed on Being Called Again

I have the following component code

<div style="text-align:center">
       <lightning:spinner aura:id="mySpinner" class="slds-hide"/>
</div>

and the following js helper code

getAccountRequestListHelper : function(component,event,helper){

        var spinner = component.find("mySpinner");
        $A.util.toggleClass(spinner, "slds-show");

        console.log('inside get account list helper'+component.get("v.ucn"));

        var action = component.get("c.searchAccounts");
        console.log('Here 1');

        var input = component.find("assignedToInput");
        var assignedToId = input ? input.get('v.value') : null;
        console.log('Here 2'+assignedToId);
        console.log('assignedToInput'+assignedToId);
        action.setParams({
            ucn : component.get("v.ucn"),
            requestSource : component.get("v.requestSource"),
            status : component.get("v.status"),
            assignedto : assignedToId,
            fromdate : component.get("v.requestDateFrom")
            //requestDateTo : component.get("v.requestDateTo")
        });

        action.setCallback(this, function(response){

            var state = response.getState();
            if (state === "SUCCESS") {
                $A.util.toggleClass(spinner, "slds-hide");
                console.log('inside success'+response.getReturnValue().length);
                if(response.getReturnValue().length > 0){
                    component.set("v.wrapAccountList", response.getReturnValue());
                    $A.util.toggleClass(spinner, "slds-hide");
                    console.log('Has it entered here');
                    console.log(component.get("v.wrapAccountList"));
                }
               else{

                }
            }
        });
        $A.enqueueAction(action);   
    },

Here the toggle spinner is initially hidden. When I click on a button it calls the method. The spinner is then displayed. However, later after the success, it is not being removed. Am I doing something wrong here

Best Answer

For this, we can simply take help of a Boolean type attribute like this:

<aura:component ...>
  <aura:attribute name="isProcessing" type="Boolean" default="false" />

  <!-- more attributes/handler/events -->


  <!-- more html -->

  <div style="text-align:center">
    <lightning:spinner class="{!((v.isProcessing)? '': 'slds-hide')}"/>
  </div>

  <!-- more html -->
</aura:component>

And in your helper use this.

({
  getAccountRequestListHelper: function (component, event, helper) {

    helper.startProcessing(component);

    console.log('inside get account list helper' + component.get("v.ucn"));

    var action = component.get("c.searchAccounts");
    console.log('Here 1');

    var input = component.find("assignedToInput");
    var assignedToId = input ? input.get('v.value') : null;
    console.log('Here 2' + assignedToId);
    console.log('assignedToInput' + assignedToId);
    action.setParams({
      ucn: component.get("v.ucn"),
      requestSource: component.get("v.requestSource"),
      status: component.get("v.status"),
      assignedto: assignedToId,
      fromdate: component.get("v.requestDateFrom")
      //requestDateTo : component.get("v.requestDateTo")
    });

    action.setCallback(this, function (response) {

      var state = response.getState();
      if (state === "SUCCESS") {
        $A.util.toggleClass(spinner, "slds-hide");
        console.log('inside success' + response.getReturnValue().length);
        if (response.getReturnValue().length > 0) {
          component.set("v.wrapAccountList", response.getReturnValue());
          $A.util.toggleClass(spinner, "slds-hide");
          console.log('Has it entered here');
          console.log(component.get("v.wrapAccountList"));
        }
        else {

        }
      }
      helper.stopProcessing(component);
    });
    $A.enqueueAction(action);
  },
  startProcessing: function (c) {
    /* this will show the <lightning:spinner /> */
    c.set('v.isProcessing', true);
  },
  stopProcessing: function (c) {
    /* this will hide the <lightning:spinner /> */
    c.set('v.isProcessing', false);
  }
})
Related Topic