Show spinner during javascript operator in LWC

Hello! I am glad to have you here! Today I am gonna show you how to show spinner during javascript operator in LWC.

If you had chance to work with LWC or Aura components then I bet that you used spinner component at least once. It is a great way to notify user that something happens in background.

Additionally it is really simple tool because in most cases all you need to do as a developer is a change one value to switch loading spinner. Because in most cases lightning-spinner is used during performing callouts to apex methods. In such scenarios, all you need care about is to turn on spinner before action, wait for response from backend and turn it off after that. So it looks like in example below:

    handleSave() {
        this.isLoading = true;
        saveRecord({record: this.changedRecord})
            .then(() => {
                this.showModal = false;
                this.isLoading = false;
            })
            .catch((error) => {
                console.error(error);
                this.isLoading = false;
            });
    }

So this is a classic example how do we usually use spinner, but sometimes you need to show spinner without calling apex method (or any asynchronous action), and in such situation you can meet some troubles.

Let’s say that you use data table with custom view like in this example. In such scenario you don’t call apex method to provide data to table, but just filter data set after view change. This operation of course consumes time so you to want to tell user to wait for results. First thing which comes to mind is to just turn on spinner before operation and turn it off after. Let’s try it.

this.isLoading = true
// start of javascript operation
//
//
//
// end of javascript operation
this.isLoading = false

So with save this code, deploy it and… it doesn’t work. When choose different list view spinner doesn’t show up, but data is loaded after some time, so code actually works. So why spinner didn’t appear? The answear is: Because it doesn’t have a chance to appear. The exact explanation is that the browser can’t update it’s view while JavaScript operation is performing.

So now let’s find out how to show spinner during javascript operator in LWC. The solution for this is pretty simple, if we cannot refresh html view during javascript running, then we need to break javascript. And how to do this? The easiest way is to use setTimeout function with time parameter 0. This solution breaks javascript operation and allows browser for reload state of spinner. Taking this into consideration our final code will look like this.

  this.isLoading = true;
  setTimeout(() => {
     this.doJavascriptOperation()
  }, 0);
  
  doJavascriptOperation() {
     // start of javascript operation
     //
     //
     //
     // end of javascript operation
     this.isLoading = false;
  }

And now save deploy and enjoy your working spinner 🙂