EDITED: lwc spinner not showing up for cached records

Question

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.

Answer 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;
    });
}