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.

Improve this question
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? Commented Jun 10, 2021 at 22:46
  • Please add at lease the declaration part of the getSomething method. Commented Jun 11, 2021 at 6:58
  • @PhilW, I modified my question, remove playground and added actual code. Commented Jun 11, 2021 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 Commented Jun 11, 2021 at 14:52
  • Please add the declaration of the getData function. Commented Jun 11, 2021 at 16:12

1 Answer 1

Reset to default
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; }); }
Improve this answer

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.