Loading Spinner in Salesforce Lightning by System Events

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:

lightning spinner using system events

Requirement:

S.No. File Name File Type
1 SpinnerController.cls Apex Class
2 Spinner.cmp Aura Bundle (component)
3 SpinnerController.js Aura Bundle (controller)
4 DemoApp.app Lightning App

Step-1: Create SpinnerConroller.cls

Here we are just creating a basic Apex class to fetch records from Account object and returning them.

Step-2: Open Spinner.cmp and paste below code.

Step-3: Open SpinnerController.js and paste the below code.

Step-4: Open DemoApp.app and call the component

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.

Loader in Lightning

 

Leave a Reply

avatar
  Subscribe  
Notify of