What is Loading Spinner?
You can show the progress of a task in salesforce lightning or visualforce through loading spinner. These are easy to use and customize in lightning.
What are System Events?
Aura framework fires several system events during its lifecycle. These events are called System events. System events are fired automatically by the Lightning framework such as during component initialization, attribute value change, rendering etc. You can handle these events in your Lightning apps or components and within the Salesforce mobile app. All Components can register for system events in their HTML markup.
Working Demo:
Step-1: Create SpinnerConroller.cls
Here we are just creating a basic Apex class to fetch records from Account object and returning them.
|
1 2 3 4 5 6 7 8 9 10 |
public with sharing class SpinnerController { @AuraEnabled public static List<Account> fetchRecords( ) { return [SELECT id, name FROM Account LIMIT 5000]; } } |
Step-2: Open Spinner.cmp and paste below code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<aura:component controller="SpinnerController" > <aura:handler event="aura:waiting" action="{!c.showSpinner}"/> <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/> <aura:attribute name="recordsData" type="Account[]" description="account Records Data" /> <!-- Lightning Spinner component --> <lightning:spinner aura:id="Spinner" alternativeText="Loading" size="medium" variant="brand"/> <!-- Button to fetch Account records --> <lightning:button variant="brand" label="Fetch Records" title="Fetch Records" onclick="{! c.fetchData }" /><br/><br/> <div style="height:300px; overflow:auto;"> <aura:iteration var="account" items="{!v.recordsData}" indexVar="index" > <p class="slds-p-horizontal_small"> {! (index+1) + ' - ' + account.Name } </p> </aura:iteration> </div> </aura:component> |
Step-3: Open SpinnerController.js and paste the below code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
({ fetchData : function(component, event, helper) { var action = component.get('c.fetchRecords'); action.setCallback(this,function(response){ if(response.getState() === 'SUCCESS') { component.set('v.recordsData',response.getReturnValue()); } else if(response.getState() === 'INCOMPLETE') { component.set('v.message','No Server Response or client is offline'); } else if(response.getState() === 'ERROR') { component.set('v.message','Error'); } }); $A.enqueueAction(action); }, showSpinner: function(component) { var spinnerMain = component.find("Spinner"); $A.util.removeClass(spinnerMain, "slds-hide"); }, hideSpinner : function(component) { var spinnerMain = component.find("Spinner"); $A.util.addClass(spinnerMain, "slds-hide"); }, }) |
Step-4: Open DemoApp.app and call the component
|
1 2 3 |
<c:Spinner /> |
Our component is now ready to use.
You don’t have to control the show/hide of spinner here, it will be handled automatically by system events. If you want to show/hide it according to your choice you can use lightning:spinner for that. Check Below.
