1

Background: I have a lightning-tabset with two tabs, each tab contains a datatable with a filter dropdown.

Each time a tab is clicked, it calls a wire function to fetch the records for the related datatable, the controller method is annotated with @AuraEnabled(cacheable=true).

Issue: When my component loads, the first time I switch from tab A to tab B I see the spinner while the records are being loaded. But when I switch back to tab A the spinner doesn't show up anymore, switching back and forth doesn't trigger it anymore.

Another example, If I change the filter on tab A, it loads the spinner (every filter triggers a wire function) and so on for every other filter, the spinner is showing as expected. But when I select the same filters that were chosen before, the spinner isn't showing up.

Edit:

Removed playground, adding my code below.

<template>
  <template if:true={isLoading}>
    <div class="exampleHolder">
      <lightning-spinner alternative-text="Loading" size="medium" variant="brand"></lightning-spinner>
    </div>
  </template>
  <lightning-tabset>
    <lightning-tab label="Tab 1" onactive={handleTabChange} value="1">
      <template if:false={isLoading}>
        <lightning-datatable
          key-field="id"
          data={data}
          columns={columns}
          show-row-number-column
          class="slds-max-medium-table_stacked">
        </lightning-datatable>
            </template> 
    </lightning-tab>
    <lightning-tab label="Tab 2" onactive={handleTabChange} value="2">
      <template if:false={isLoading}>
        <lightning-datatable
          key-field="id"
          data={data}
          columns={columns}
          show-row-number-column
          class="slds-max-medium-table_stacked">
        </lightning-datatable>
            </template> 
    </lightning-tab>
</lightning-tabset>
</template>

JS:

import getData from '@salesforce/apex/getAsyncController.getData';

    isLoading = true;
    data = [];
    program = null;
    filter = null;
@wire(getData)
    wiredMethod({error, data}){  
        getData({program:this.program,filter:this.filter})
        .then(data => {
            this.data = data
            this.error = null;
            this.isLoading = false:
        })
        .catch(error => {
            this.data = null;
            this.error = error;
        });

    }   


handleTabChange(event) {
    this.isLoading = true;
    this.activetabContent = event.target.value;
    this.callAsync();
}
callAsync() {
    getData({program: this.program,filter: this.filter})
        .then(data => {
            this.data = data
            this.error = null;
            this.isLoading = false:
        })
        .catch(error => {
            this.data = null;
            this.error = error;
        });
}

Controller:

public with sharing class getAsyncController {

    @AuraEnabled(cacheable = true)
    public static List < Program__c > getData(String program, String filter) {
        if (filter == null)
            return [SELECT Id FROM Program__c WHERE Name =: program];
        else
            return [SELECT Id FROM Program__C WHERE Name =: program AND Status__c =: filter]
    }
}

Is there another way to make the spinner show up? Setting IsLoading to true/false works when I get data from the server but not for cached records it seems.

12
  • Not sure the playground is showing your issue. If I change the setTimeout to 100ms, the issue goes away. Can you post your actual handleTabChange method? Mostly likely your wire adaptor is never getting called because of the cache. Are the arguments the same each time you make the call? – digglemister Jun 10 at 22:46
  • Please add at lease the declaration part of the getSomething method. – Phil W Jun 11 at 6:58
  • @PhilW, I modified my question, remove playground and added actual code. – Json Jun 11 at 14:52
  • @digglemister you're right, changing the setTimeout to 100ms works for the playground but doesn't work for my actual code, I updated my questions – Json Jun 11 at 14:52
  • Please add the declaration of the getData function. – Phil W Jun 11 at 16:12
1

First, remove the @wire method - you are using an imperative call, so just do that.

Second, since the data is now cached, it's probably returning so quickly that the spinner is not getting time to actually show. If you REALLY want it to show you could add a wee timeout for effect.

connectedCallback(){
  this.isLoading = true;
  this.callAsync();
}

handleTabChange(event) {
  this.isLoading = true;
  this.activetabContent = event.target.value;
  //add a small delay so the spinner shows
  window.setTimeout(() => {
    this.callAsync();
  }, 1500);
  
}
callAsync() {
  getData({program: this.program,filter: this.filter})
    .then(data => {
       this.data = data
       this.error = null;
       this.isLoading = false:
    })
    .catch(error => {
      this.data = null;
      this.error = error;
    });
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.