function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Rebekah LillyRebekah Lilly 

Help with Spinner during imperative call and table refresh.

I am struggling to get a spinner to display during a table refresh and an imperative call. When the component is initially displayed, it loads data into a table and the spinner works perfectly:

 connectedCallback() {
        this.showLoading = true;
 }

@wire(fetchShipments, {inputId: '$inputId', inputFromDate: null, inputToDate: null})
wiredFetchShipments({ error, data }) {
        if (data) {
            this.shipments = data;
            this.allshipments = data;            
        } else if (error) {
            this.error = error;
            this.shipments = undefined;
            this.allshipments = undefined;
       }
        this.showLoading = false;
        this.isLoaded = true;
    }

However, if users want to filter the data, I have various search fields and a "Refresh List" button. The Refresh List works perfectly to reload the table, but does not display the spinner. I played around with it and added an await and a delay... is this the only way to get a spinner to show for something like this? If the user changes the dates to be outside of the defaults that were originall fetched from the server, then I must make another call to load new records... the spinner does not display there either. I am trying to work with async and await, but struggling to get it to work. There has to be a better way:

showLoadingDelay() {
        return new Promise(resolve => {
            setTimeout(function() {
                resolve(false)
            }, 4000)
        })
    }

 async handleRefresh( event ) {
        if (( dates selected are outside of the current default date range fetched from server) {
            const newdata = await this.handleDateUpdate(); // fetch new records from server
            this.showLoading = true;  // show spinner 
        } else {
            this.showLoading = true; // show spinner
        }
        this.shipments = this.allshipments;
        let recs = [];
        for (let rec of this.shipments) {
             let pushrec = true;
             //filter records based on user specified criteria
            if ( pushrec === true ) {
                 recs.push( rec );
            }
        }
        this.showLoading = await this.showLoadingDelay(); // trying to make it show spinner
        this.shipments = recs;
    }

async resetDates( event ) {
        fetchShipments({inputId: this.accountId, inputFromDate: null, inputToDate: null})
            .then(result => {
                this.shipments = result;
                this.allshipments = result;
            })
            .catch(error => {
                this.shipments = undefined;
                this.allshipments = undefined;
            })
    }

All the refreshes of the data work perfectly. From watching it in the debugger, it is retreiving the correct records when it should but I cannot get the darn spinner to show during the refresh because it happens so fast. That is why I was attempting the delay method. It retreives new records from the server fairly quickly too... so again I was trying the delay to get the spinner to show.

Any suggestions?
Rebekah LillyRebekah Lilly
This article solved my issue: https://salesforceprofs.com/show-spinner-during-javascript-operator-in-lwc/