+ Start a Discussion
Eric Blaxton 11Eric Blaxton 11 

Add Spinner to lightning component

Hi and thanks in advance for any help.

I created a lightning component (Quick action).  How do I add a spinner while the code is doing it's job?  
 
Component

<aura:component controller="sendtoBrandQA" implements="force:lightningQuickActionWithoutHeader,force:hasRecordId,force:appHostable,flexipage:availableForAllPageTypes" >
	       
    <aura:attribute name="cse" type="Case"/> 
    <!--old way of passing to Controller and runs without interaction from user -->
    <!--<aura:handler name="init" value="{!this}" action="{!c.doInit}" /> -->  
    <!--shows/waits for outlined button to be pressed: "Send Brand QA email" -->
    <lightning:button variant="brand-outline" label="Send Brand QA Email" onclick="{!c.doInit}" />
    
     
</aura:component>
 
Controller:

({
       
    doInit : function(component, event, helper) 
    {         
        
        //Get Current user
        var userId = $A.get("$SObjectType.CurrentUser.Id"); 
        console.log("### userId = "+userId);
        var action = component.get("c.escalateCase");
        action.setParams({
            "objectId": component.get("v.recordId"),
            "userId" : userId            
        });
        
        
        action.setCallback(this, function(response){
            var state = response.getState();
           
            console.log("#### state = "+state);
            if(component.isValid() && state === "SUCCESS"){
                console.log("Hello 1");
                console.log("### response.getReturnValue() = "+JSON.stringify(response.getReturnValue()));
                var str = response.getReturnValue();
                console.log("#### str = "+ str);
                if(str == 'Item has been escalated!'){
                    console.log("#### success = "+str);
                    helper.toastMessage(str, 'success');
                    $A.get("e.force:closeQuickAction").fire();
                    
                }else{
                    console.log("#### error = "+str);
                    helper.toastMessage(str, 'error');
                    $A.get("e.force:closeQuickAction").fire();
                }
                
            }
        });
        
        $A.enqueueAction(action);
    }    
    
})
Helper:

({
    
 toastMessage : function(msg, type) 
    {        
        var toastEvent = $A.get("e.force:showToast");              
        toastEvent.setParams
        ({
            title : 'Brand QA Information',
            message: msg,
            duration:' 15000',
            key: 'info_alt',
            type: type,
            mode: 'dismissable'
        });
        toastEvent.fire();        
 }    
    
})

Regards,
Eric 
 
Best Answer chosen by Eric Blaxton 11
Eric Blaxton 11Eric Blaxton 11
Thanks David for these links.  Here's the code changes I made.

Component:
<aura:component controller="sendtoBrandQA" implements="force:lightningQuickActionWithoutHeader,force:hasRecordId,force:appHostable,flexipage:availableForAllPageTypes" >
	 <!--aura handler with waiting and donewaiting events-->
    <aura:handler event="aura:waiting" action="{!c.showSpinner}"/>
    <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>    
    
    <!--loading spinner start-->
    <div class="exampleHolder">
        <lightning:spinner aura:id="mySpinner" class="slds-hide"/>
    </div>
    <!-- Loading spinner end-->   
    
    <aura:attribute name="cse" type="Case"/> 
    <!--old way of passing to Controller and runs without interaction from user -->
    <!--<aura:handler name="init" value="{!this}" action="{!c.doInit}" /> -->  
    <!--shows/waits for outlined button to be pressed: "Send Brand QA email" -->
    <div class="slds-clearfix">
        <div class="slds-float_right">
       
     <lightning:button variant="brand" label="Send to Brand QA" onclick="{!c.doInit}" />
   
        </div>
    </div>
</aura:component>

Controller:
 
({   
   
    doInit : function(component, event, helper) 
    {         
       
        //Get Current user
        var userId = $A.get("$SObjectType.CurrentUser.Id"); 
        console.log("### userId = "+userId);
        var action = component.get("c.escalateCase");
        action.setParams({
            "objectId": component.get("v.recordId"),
            "userId" : userId            
        });     
               
        action.setCallback(this, function(response){
            var state = response.getState();
           
            console.log("#### state = "+state);
            if(component.isValid() && state === "SUCCESS"){
                console.log("Hello 1");
                console.log("### response.getReturnValue() = "+JSON.stringify(response.getReturnValue()));
                var str = response.getReturnValue();
                console.log("#### str = "+ str);
                if(str == 'Item has been escalated!'){
                    console.log("#### success = "+str);
                    helper.toastMessage(str, 'success');
                    $A.get("e.force:closeQuickAction").fire();
                    
                }else{
                    console.log("#### error = "+str);
                    helper.toastMessage(str, 'error');
                    $A.get("e.force:closeQuickAction").fire();
                }
                
            }
        });
        
        $A.enqueueAction(action);
    },

    //Spinner
        // function automatic called by aura:waiting event  
    showSpinner: function(component, event, helper) {
        // remove slds-hide class from mySpinner
        var spinner = component.find("mySpinner");
        $A.util.removeClass(spinner, "slds-hide");
    },    
     // function automatic called by aura:doneWaiting event 
    hideSpinner : function(component,event,helper){
        // add slds-hide class from mySpinner    
        var spinner = component.find("mySpinner");
        $A.util.addClass(spinner, "slds-hide");
    }
    // End Spinner
    
})

css:
 
.THIS.slds-spinner_container {  
  z-index: 10000;
  position: fixed;   
}    
.THIS .left-align {
    text-align: left;
}
.THIS .right-align {
    text-align: right;
}

.THIS {
    height: 50px;
}

 

All Answers

David Zhu 🔥David Zhu 🔥
You may use Lightinng:spinner cmponent or  lightning design system for the spinner.

https://developer.salesforce.com/docs/component-library/bundle/lightning:spinner

https://www.lightningdesignsystem.com/components/spinners/
Eric Blaxton 11Eric Blaxton 11
Thanks David for these links.  Here's the code changes I made.

Component:
<aura:component controller="sendtoBrandQA" implements="force:lightningQuickActionWithoutHeader,force:hasRecordId,force:appHostable,flexipage:availableForAllPageTypes" >
	 <!--aura handler with waiting and donewaiting events-->
    <aura:handler event="aura:waiting" action="{!c.showSpinner}"/>
    <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>    
    
    <!--loading spinner start-->
    <div class="exampleHolder">
        <lightning:spinner aura:id="mySpinner" class="slds-hide"/>
    </div>
    <!-- Loading spinner end-->   
    
    <aura:attribute name="cse" type="Case"/> 
    <!--old way of passing to Controller and runs without interaction from user -->
    <!--<aura:handler name="init" value="{!this}" action="{!c.doInit}" /> -->  
    <!--shows/waits for outlined button to be pressed: "Send Brand QA email" -->
    <div class="slds-clearfix">
        <div class="slds-float_right">
       
     <lightning:button variant="brand" label="Send to Brand QA" onclick="{!c.doInit}" />
   
        </div>
    </div>
</aura:component>

Controller:
 
({   
   
    doInit : function(component, event, helper) 
    {         
       
        //Get Current user
        var userId = $A.get("$SObjectType.CurrentUser.Id"); 
        console.log("### userId = "+userId);
        var action = component.get("c.escalateCase");
        action.setParams({
            "objectId": component.get("v.recordId"),
            "userId" : userId            
        });     
               
        action.setCallback(this, function(response){
            var state = response.getState();
           
            console.log("#### state = "+state);
            if(component.isValid() && state === "SUCCESS"){
                console.log("Hello 1");
                console.log("### response.getReturnValue() = "+JSON.stringify(response.getReturnValue()));
                var str = response.getReturnValue();
                console.log("#### str = "+ str);
                if(str == 'Item has been escalated!'){
                    console.log("#### success = "+str);
                    helper.toastMessage(str, 'success');
                    $A.get("e.force:closeQuickAction").fire();
                    
                }else{
                    console.log("#### error = "+str);
                    helper.toastMessage(str, 'error');
                    $A.get("e.force:closeQuickAction").fire();
                }
                
            }
        });
        
        $A.enqueueAction(action);
    },

    //Spinner
        // function automatic called by aura:waiting event  
    showSpinner: function(component, event, helper) {
        // remove slds-hide class from mySpinner
        var spinner = component.find("mySpinner");
        $A.util.removeClass(spinner, "slds-hide");
    },    
     // function automatic called by aura:doneWaiting event 
    hideSpinner : function(component,event,helper){
        // add slds-hide class from mySpinner    
        var spinner = component.find("mySpinner");
        $A.util.addClass(spinner, "slds-hide");
    }
    // End Spinner
    
})

css:
 
.THIS.slds-spinner_container {  
  z-index: 10000;
  position: fixed;   
}    
.THIS .left-align {
    text-align: left;
}
.THIS .right-align {
    text-align: right;
}

.THIS {
    height: 50px;
}

 
This was selected as the best answer