You need to sign in to do that
Don't have an account?
Rebekah 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?
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 Lilly
This article solved my issue: https://salesforceprofs.com/show-spinner-during-javascript-operator-in-lwc/