Spinner is being displayed properly but not removed on being called again

Question

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

Answer 1

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);
  }
})

Answer 2

Don't add show class , just toggle the Hide Class..

I think the problem is you are adding the "slds-show" class to the spinner. Don't add the show class, just remove the "slds-hide" from the element and then add it back. Toggle - add the class if it's not there and removes it if it's there. You added the "show" class but didn't remove it.

It tried this, You can also try and see the css class in the element. you can use any Apex controller for testing.

  aura:component description="SpinnerTest" controller="AccountsControllerList">
        <lightning:button variant="brand" label="Toggle" onclick="{!c.callFunction}"/>
        <aura:attribute name="accounts" type="List" />
        <aura:attribute name = "gotIt" type= "string"/>
        {!v.gotIt}
        <div id = "spinnerDiv">
            <lightning:spinner variant="brand" size = "large" aura:id = "sps" class="slds-hide"/>
        </div>
</aura:component>

Client Controller

({
    callFunction: function(component,event,helper){
        var spin = component.find('sps');
        $A.util.toggleClass(spin,'slds-hide'); // removing hide class to show the spinner.
        var action = component.get('c.getAccounts');
        action.setCallback(this,function(response){
           component.set("v.gotIt", 'Response Recieved');
           $A.util.toggleClass(spin,'slds-hide'); // adding the hide class
           console.log('response', response);
           component.set('v.accounts',response.getReturnValue());
        });
        $A.enqueueAction(action);
    }
})