0

I have two lightning tabs in a lightning component. When changing from one tab to another it takes time to load the data in the second tab. During this time, I am trying to display a spinner/loading icon but I am running into issues while implementing it, the spinner doesn't load for some reason. Can anyone please advise what I am missing? Thanks for your inputs

enter image description here

Expanded View Tab

<lightning:tab label="Expanded View"  onactive="{!c.handleExpandedView}" >
         <aura:if isTrue="{!and(v.data!=null,v.restrictedData!=null)}">
        <c:GS_DatatableTargetPreQualification aura:id="datatableId" columns="{!v.detailedViewColumns}" data="{!v.data}"
                                              restrictedData="{!v.restrictedData}"
                                              dataCache="{!v.dataCache}"
                                                selectedCheckBoxes="{!v.selectedCheckBoxes}" 
                                                isSearch="true"
                                                tableData="{!v.tableData}"
                                                totalAmount="{!v.totalAmount}" 
                                              millionOrBillion="{!v.millionOrBillion}"
                                               isAllSelected="{!v.isAllSelected}"
                                                taskAssignedColumn="{!v.taskAssignedColumn}"                              
                                                showRowNumberColumn="true"
                                                reload="{!v.reload}"  />
             <aura:set attribute="else">
                <div class="slds-spinner_container">
                    <div role="status" class="slds-spinner slds-spinner_medium">
                      <span class="slds-assistive-text">Loading</span>
                      <div class="slds-spinner__dot-a"></div>
                      <div class="slds-spinner__dot-b"></div>
                    </div>
                    <div role="status" class="slds-align_absolute-center" style="height:12rem">
                        <span class="slds-badge slds-theme_warning">Loading...</span>
                    </div>
                </div>
                <!--<lightning:spinner alternativeText="Loading" size="medium" />-->
             </aura:set>
       <!--<c:GS_Restricted_DatatableTargetPreQualification columns="{!v.detailedViewColumns}" data="{!v.restrictedData}"
                selectedCheckBoxes="{!v.selectedCheckBoxes}" 
                isSearch="true"
                totalAmount="{!v.totalAmount}"                               
                taskAssignedColumn="{!v.taskAssignedColumn}"                              
                showRowNumberColumn="true"/> -->
        </aura:if>     
    </lightning:tab> 

Condensed View Tab

 <lightning:tab label="Condensed View" onactive="{!c.handleCondensedView}" >
        <c:DataTableCommitmentManagementCondensedView aura:id="datatableId2" 
                                                      columns="{!v.summaryViewColumn}" 
                                                      tableData="{!v.tableData}" 
                                                      tableDataCondensedView="{#v.tableDataCondensedView}"
                                                      selectedCheckBoxes="{!v.selectedCheckBoxes}" 
                                                      showRowNumberColumn="true"
                                                      isAllSelected="{!v.isAllSelected}"
                                                      showParentSpinner="{!v.showSpinner}"
                                                      />
    </lightning:tab>
</lightning:tabset>

Controller

handleCondensedView:function(component,event,helper){
    
    var actionEvent = component.getEvent("spinner")
    actionEvent.setParams({
        showspinner:true
    });
    actionEvent.fire();
        var condensedview = component.find("datatableId2");
    if(condensedview){
        var data = component.get('v.dataCache');
         condensedview.refreshWithUpdateData(data);    
    }
},

I have come across the below two posts that advise that adding a set timeout should display the spinner. Tried this. However, it did not help

How can I display a spinner when switching between lightning:tabset tabs?

Display lighting:spinner component during component render cycle

Your Answer

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

Browse other questions tagged or ask your own question.