Hide Spinner on LWC load with multiple wire methods

Question

I have created a LWC which is called from quick action.

The component has multiple wire methods that retrieves data from the record (field values, picklist values and so on) once the component is called.

I also have a property (isLoaded) which is initialize to true in the beginning, and responsible to show/hide the spinner in the UI.

Is there any why to mark this property to FALSE once ALL the wire methods completed and the data is fully loaded ?

This is my js example file:

isLoaded = true;

@wire (someMethod) wireMethod ({ error, data }){
    if(data) ...
    else if(error) ...  
}
@wire (someMethod) wireMethod ({ error, data }){
    if(data) ...
    else if(error) ...  
}
@wire (someMethod) wireMethod ({ error, data }){
    if(data) ...
    else if(error) ...  
}
@wire (someMethod) wireMethod ({ error, data }){
    if(data) ...
    else if(error) ...  
}
@wire (someMethod) wireMethod ({ error, data }){
    if(data) ...
    else if(error) ...  
}
@wire (someMethod) wireMethod ({ error, data }){
    if(data) ...
    else if(error) ...  
}

Thanks !

Answer 1

You just have to check if everything is loaded. I do this in a common method to avoid code redundancy.

isValue1Loaded;
isValue2Loaded;
// ...
@wire(method1) wireHandler({ error, data }) {
  this.isValue1Loaded = !!(error || data);
  if(data) {
  else if(error) {
  }
  this.updateLoadingStatus();
}
// ...
updateLoadingStatus() {
  this.isLoaded = this.isValue1Loaded && this.isValue2Loaded; // ... etc
}

You may need to customize this strategy based on your data (e.g. 0 is falsy, so you might check against being undefined).

You can also technically just use a getter for this:

get isLoaded() {
  return this.isValue1Loaded &&
    this.isValue2Loaded; // etc
}