I want to display a 'loading' spinner until data is loaded completely from the server. How to do this in javascript for salesforce lwc?

Question

I am using 2 functionalities in sequence: 1. GetMetadata 2. GetTableData Using the metadata values the table is prepared and rendered. I want to display a spinner 'loading' until the entire fetch has been made from the server for table data. What is the best way to display this spinner? It should stop displaying the spinner once the data has been fetched and table is ready. I am using Jquery to display the table.

Answer 1

You can create a loadingSpinner page/view which will constitute of html and css. The desired changes for design and transparency can be added on it.

You can render this view on DOM in two ways:

1. Render the DOM on your first ajax request and you can end it when you receive a successful callback for the same. Render again for the second request and henceforth. This might create a little fluctuation on UI as there are two requests in sequence. For this, you can try second method.

2. Render the DOM on first ajax request and close the loadingSpinner page when success callback is received of the last sequence.

Answer 2

In the long run there's a chance you don't need jQuery, LWC might have all you need for pulling data, displaying tables... Well, won't do pretty charts but there are lots of examples how to link external libraries.

Check if my answer here will give you some ideas about loading data and spinners: Showing a loading indicator while calling Apex in Salesforce LWC

If you have a "daisy chain" of dependent calls and you need results of one in another... there's nice self-paced training on Trailhead about modern JavaScript. It tries to talk about general "new" things you might not have seen before but which make you really efficient when you want to use LWC and help understand many examples: https://trailhead.salesforce.com/en/content/learn/modules/modern-javascript-development/write-asynchronous-javascript?trail_id=learn-to-work-with-javascript

If you don't have time for this and just want quick&dirty example - check out this: https://salesforce.stackexchange.com/questions/255958/chain-wire-methods-together-in-lightning-web-components

Answer 3

Add a loading spinner from here https://loading.io/css/ with a data-count to track how many functions is incomplete

<div id="loading" data-count="2" class="lds-dual-ring"></div>

Then, your JavaScript would look like this:

$.ajax({
         url:'your-GetMetadata-url',
         success:function(data){
           //prepare and render
           checkLoadingState();
         }
});

$.ajax({
         url:'your-GetTableData-url',
         success:function(data){
           //prepare and render
           checkLoadingState();
         }
});

//this function checks if all completed.
function checkLoadingState(){
  var $loader=$('#loading'),
      counter=Number($loader.data('count') -1);

  if(counter==0){ // all finished?
    $loader.hide();
  }else{
    $loader.data('count',counter);
  }
}