Progress indicator not stopping inside TabView in android platform nativescript - nativescript

Question

Iam working the nativescript application.I have TabView with three tabs,in each tab i have progress indicator for showing api is loading and also hide the indicator after response came from api.In ios platform the indicator hide perfectly but android platform the indicator was not hide.How to solve the issue?
My TabView html code is:
<TabView [(ngModel)]="tabSelectedIndex" (selectedIndexChange)="onIndexChanged($event)" selectedTabTextColor="#40053e" androidTabsPosition="bottom" androidOffscreenTabLimit="0" iosIconRenderingMode="alwaysOriginal">
<StackLayout *tabItem="{title: 'Security', iconSource: 'res://lock'}">
<StackLayout>
<security></security>
</StackLayout>
</StackLayout>
<StackLayout *tabItem="{title: 'Personal', iconSource: 'res://boy'}">
<StackLayout>
<personal></personal>
</StackLayout>
</StackLayout>
<StackLayout *tabItem="{title: 'Payment', iconSource: 'res://card'}">
<StackLayout>
<payment></payment>
</StackLayout>
</StackLayout>
</TabView>
My TabViw ts code:
import { OnInit, Component } from "#angular/core";
import { TabView } from "tns-core-modules/ui/tab-view";
import { Page } from "ui/page";
#Component({
moduleId: module.id,
selector: "profiletab",
templateUrl: 'profiletab.component.html',
styleUrls: ['profiletab.component.css']
})
export class ProfileTabComponent implements OnInit {
private tabSelectedIndex:number;
private selectedTabName;
tabview:TabView;
constructor(private page:Page) {
this.tabSelectedIndex = 0;
this.selectedTabName = "Security Info";
}
ngOnInit(){
// this.tabview=<TabView>this.page.getViewById("tabcontrol");
// this.tabview.androidOffscreenTabLimit=1;
}
onIndexChanged(args){
let tabView = <TabView>args.object;
switch (tabView.selectedIndex) {
case 0:
this.selectedTabName = "Security Info";
break;
case 1:
this.selectedTabName = "Personal Info";
break;
case 2:
this.selectedTabName = "Payment Info";
break;
default:
break;
}
}
}
I will create indicator inside the tab1,tab2,tab3 like:
ngOnInit(){
this.loadCountries();
}
loadCountries(){
var _this = this;
if (!this.conn.getConnectionStatus()) {
Toast.makeText("Please check your internet connection").show();
return;
}
Indicator.showIndicator("Loading Please Wait...");
this.authenticationService.Get_Countries_List().then(function(response){
_this.renderData(response);
}
});
}
renderData(values){
this.authenticationService.Get_States_List(_this.dataService.userProfile.contact[0].country).then(function(response){
Indicator.hideIndicator();
}
}

Answer 1

You seem to create different instances while showing & hiding indicator. You must call hide of same LoadingIndicator instance on which you did call show.
Source: https://github.com/NathanWalker/nativescript-loading-indicator/issues/58
Also here is an example that demonstrates how you can do this without a plugin and always keep reference of current loading indicator no matter how many times you call show / hide simultaneously. You may even apply similar logic to maintain your LoadingIndicator instance with plugin. Refer ui-helper.ts and home-page.ts.
FYI, by nature of platform iOS seems to use a singleton which is why it works there even if you create multiple LoadingIndicator. But with Android a new progress dialog is created every time when you call show, so you must call hide on same instance.
Also as you are using Angular, I would suggest you to take advantage of framework features like Http Interceptors so you wouldn't have to create / handle indicator for each tab or each api call separately.