Salesforce Lightning Spinner

Below are the steps to use spinner with in a single component in Salesforce Lightning


1) Add below two lines of code in lightning component

    <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>
    <aura:attribute name="instanceChanged" type="boolean" />

2) Add below <aura:if /> markup in the lightning component

<aura:if isTrue="{!v.instanceChanged}"> 
<div class="slds-spinner_container ">
<div role="status" class="slds-spinner slds-spinner--medium slds-spinner--brand">
<span class="slds-assistive-text">Loading</span>
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
 </div>
</div>
</aura:if> 

3) Add below event to your lightning component. It depends on type of event you want to call the method. in my example iam calling the lightning controller methods on change event. You can call the method in click event or any other event you want and add below line of code to it

<ui:inputSelect class="dynamic" aura:id="inputSelectDynamic" change="{!c.instanceDetails}" />


4) Add below line of code in the instanceDetails method to unhide the spinner

       //Unhide the spinner
      
       component.set("v.instanceChanged",true);

5) Add below line of code to hide the spinner
   
 hideSpinner : function (component, event, helper) {
        //Hide the spinner
        component.set("v.instanceChanged",false);
    }

Please note, from above the hideSpinner method will be invoked when event doneWaiting is fired from step1

How to use jQuery in Lightning

Below are the steps with simple example on how to use jquery in Lightning component.

1) Import the jquery library as static resource in salesforce

2) Include below markup in the lightning component.

<ltng:require scripts="/resource/jquery/" afterScriptsLoaded="{!c.doInit1}"/>

Please note: I have named the static jquery library has 'jquery' that is why in the above markup for scripts attribute i have given value as /resource/jquery/. Name must be given as per thee static resource name given in step1

3) Write the below simple jquery code in your component js file for testing the jquery call.

  doInit1 : function(component, event, helper) {

      console.log('*************** Inside do Init1 Method *****************')
        
      jQuery("document").ready(function(){
          
         console.log('Inside jquery'); 
          
          alert("Jquery");
          
      });
        
}

4) When you execute your component, you should verify the browser console and alert should be popped up if jquery is successfully invoked.

Import point to note :

1) Either jQuery can be used to refer jquery code or $ can also be used in component js file. for example look into code given below

 var opts1 = {
                    "class1": "optionClass1",
                    "class2": "optionClass1",
                    "class3": "optionClass1"
                  };
         
                
$.each(opts1,function(key,value){
              
             console.log('Key is' + key);
              
});

2) In the markup for lightning component which includes the js script. afterScriptLoaded is not mandatory.