lwc spinner not showing if performing a javascript operation

Question

I am performing a javascript sorting an array of objects of size 2500 records that is displayed in lightning data table. This takes 3-5 seconds. Meanwhile I wanted to show lightning-spinner.

Html Code

<template if:true={showSpinner}>
                <lightning-spinner alternative-text="Loading" size="medium" ></lightning-spinner>
            </template>

Javascript code

this.showSpinner=true;
this.allData =  this.sortMyData(this.allData,sortByMapped,this.sortDirection);
this.showSpinner=false;

Spinner never displays. But If I put a breakpoint in the second line , the spinner appears. I believe this happens because the time to sort is very less. But the time taken to render the records in data table takes more time. If this is correct , is there a way I can show the spinner till the complete table renders the data ? If not, what am I missing?

Answer 1

The problem is that the browser can't update the view while JavaScript is running. In order to make this work the way you expect, you need a brief pause:

this.showSpinner = true;
new Promise(
  (resolve,reject) => {
    setTimeout(()=> {
        this.sortMyData(this.allData, this.sortByMapped, this.sortDirection);
        resolve();
    }, 0);
}).then(
    () => this.showSpinner = false
);

Here's a simulation of that in action.