0

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

  • I am using var spinner = component.find("mySpinner"); to fetch – Rimii Mar 24 '18 at 18:54
  • 2
    You need to remove the show css and add the hide. I see all you are doing to adding the hid but leaving the show – Eric Mar 25 '18 at 6:49
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);
  }
})
  • Thanks @itzmukeshy7 it works. What I would like to understand is that. Can't it be achieved with the way I had done? Hide and Show slds? – Rimii Mar 25 '18 at 5:36
  • 1
    That is also possible but in that way, you have to add/remove classes slds-hide/slds-show as you have added slds-hide so just adding slds-show won't show the element you have to remove the slds-hide as well to show the element; – itzmukeshy7 Mar 25 '18 at 6:33
1

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);
    }
})
  • This works. Thanks a ton.But, I had to mark the previous answer as correct as it came it first. – Rimii Mar 25 '18 at 6:33

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.