Show/hide spinner every time @wire is called

Question

I have a lwc with multiple wires that retrieve information and I need to display a spinner while all this calls are being made and hide it whenever they finish.

I've seen that you can do this wiring the property instead of a function but when I try this my functionality is being truncated so I miss data or it's not getting retrieved when needed.

This is my lwc.js:

@wire (getTypes, { filtersJSON : '$filtersJSON' }) wireTypes ({ error, data }){
    if(data) this.handleUpdateCachedOptions('Type__c', (data && data.length > 1 ? data : []));
    else if(error) this.handleShowErrorToast(error);  
}
@wire (getBrands, { filtersJSON : '$filtersJSON' }) wireBrands ({ error, data }){
    if(data) this.handleUpdateCachedOptions('Brands__c', (data && data.length > 1 ? data : []));
    else if(error) this.handleShowErrorToast(error);  
}
@wire (getModels, { filtersJSON : '$filtersJSON' }) wireModels ({ error, data }){
    if(data) this.handleUpdateCachedOptions('Model__c', (data && data.length > 1 ? data : []));
    else if(error) this.handleShowErrorToast(error);  
}
@wire (getColors, { filtersJSON : '$filtersJSON' }) wireColors ({ error, data }){
    if(data) this.handleUpdateCachedOptions('Color__c', (data && data.length > 1 ? data : []));
    else if(error) this.handleShowErrorToast(error);  
}
@wire (getFormats, { filtersJSON : '$filtersJSON' }) wireFormats ({ error, data }){
    if(data) this.handleUpdateCachedOptions('Format__c', (data && data.length > 1 ? data : []));
    else if(error) this.handleShowErrorToast(error);  
}
@wire (getFinish, { filtersJSON : '$filtersJSON' }) wireFinishes ({ error, data }){
    if(data) this.handleUpdateCachedOptions('Finish__c', (data && data.length > 1 ? data : []));
    else if(error) this.handleShowErrorToast(error);  
}
@wire (getThickness, { filtersJSON : '$filtersJSON' }) wireThicknesses ({ error, data }){
    if(data) this.handleUpdateCachedOptions('Thickness__c', (data && data.length > 1 ? data : []));
    else if(error) this.handleShowErrorToast(error);  
}

Is there some way to trigger this wiring the functions?

Thanks in advance!

Regards,

Answer 1

We can just make the spinner display when the value changes with a getter/setter.

#filtersJSON; // private var
set filtersJSON(value) {
  if(value !== this.#filtersJSON) {
    this.isLoading = true;
  }
  this.#filtersJSON = value;
}
get filtersJSON() {
  return this.#filtersJSON;
}

The individual wire methods can then turn off the spinner the next time they pulse:

@wire (getTypes, { filtersJSON : '$filtersJSON' }) wireTypes ({ error, data }){
  if(data) {
    this.handleUpdateCachedOptions('Type__c', data);
  }
  if(error) {
    this.handleShowErrorToast(error);
  }
  if(data || error) {
    this.isLoading = false;
  }
}

Answer 2

To display a spinner while the wire calls are being made and hide it when they finish, you can follow these steps:

1. Add a Boolean variable isLoading to the component's JavaScript file, and initialize it to true.

2. In the HTML template of your LWC, add a spinner component with a conditional rendering based on the isLoading variable. You can use the lightning-spinner component provided by the Lightning Web Components framework.

3. In each of the wire methods, update the isLoading variable to true before the wire call is made and set it to false once the call is complete.

4. Make sure to handle any errors that may occur during the wire calls, and set the isLoading variable to false in the error handler as well.

Here's an example implementation of these steps:

HTML

<template>
  <lightning-spinner if:true={isLoading}></lightning-spinner>
  <!-- rest of the component's content -->
</template>

JS

isLoading = false;

    @wire(getTypes, { filtersJSON: '$filtersJSON' })
    wireTypes({ error, data }) {
        this.isLoading = true;
        if (data) {
            this.handleUpdateCachedOptions('Type__c', data.length > 1 ? data : []);
        } else if (error) {
            this.handleShowErrorToast(error);
        }
        this.isLoading = false;
    }

    @wire(getBrands, { filtersJSON: '$filtersJSON' })
    wireBrands({ error, data }) {
        this.isLoading = true;
        if (data) {
            this.handleUpdateCachedOptions('Brands__c', data.length > 1 ? data : []);
        } else if (error) {
            this.handleShowErrorToast(error);
        }
        this.isLoading = false;
    }

// repeat the same pattern for the other @wire methods

Let me know if this works.