How to show LoadController for multiple requests in Ionic 2
According to the Ionic documentation, I can load the Ionic LoadingController with this piece of code:
ionViewLoaded() {
let loader = this.loading.create({
content: 'Getting latest entries...',
});
loader.present().then(() => {
this.someService.getLatestEntries()
.subscribe(res => {
this.latestEntries = res;
loader.dismiss();
});
});
}
This works fine if I just make 1 ajax request. But I have 5 requests and if I hide / show the load controller like this it will make the screens flicker.
Is there a way that I can imagine a loadController but then dismiss()
only when all the Ajax requests are complete?
EDIT:
Requests are independent of each other. They are independent. What I'm looking for is a way to get notified when all observable requests have completed. This way I can dismiss the LoadController when they are all finished.
source to share
I am using the following utility in my application. This will also work for multiple stages and / or pages if we want to show the same loader and need to change the loader text at different stages.
We can call showLoader () multiple times, eventually we need to call hideLoader ().
@Injectable()
export class Utility {
loader: any = null;
constructor(private _alertCtrl: AlertController,
private _loadingController: LoadingController) {
}
private showLoadingHandler(message) {
if (this.loader == null) {
this.loader = this._loadingController.create({
content: message
});
this.loader.present();
} else {
this.loader.data.content = message;
}
}
private hideLoadingHandler() {
if (this.loader != null) {
this.loader.dismiss();
this.loader = null;
}
}
public showLoader(message) {
this.showLoadingHandler(message);
}
public hideLoader() {
this.hideLoadingHandler();
}
}
source to share
You shouldn't use multiple subscribers, and if your requests are independent of each other, you can use an operator combineLatest
, so all requests will run consistently and get notified when they are done:
ionViewLoaded() {
let loader = this.loading.create({
content: 'Getting latest entries...',
});
let loaded = Observable.combineLatest(
this.someService.getLastEntries().do((entries) => {
//do stuff with last entries
}),
this.someOtherServices.getOtherStuff().do((stuff) => {
// do stuff with stuff
})
// etc...
)
loader.present().then(() => loaded.toPromise()).then(() => loader.dismiss());
}
source to share
You can link all requests within each subscription.
ionViewLoaded() {
let loader = this.loading.create({
content: 'Getting latest entries...',
});
loader.present().then(() => {
this.someService.getLatestEntries1()
.subscribe(res => {
this.latestEntries1 = res;
this.someService.getLatestEntries2()
.subscribe(res => {
this.latestEntries2 = res;
// OTHER CALLS ...
this.someService.getLatestEntries5()
.subscribe(res => {
this.latestEntries5 = res;
loader.dismiss();
});
});
});
});
}
The way you are using loader.dismiss()
is not good, it will call someService.getLatestEntries
and imediatelly use firing, you need to use it in returning your promise / subscribe / observable so that it only fires when the function is done.
Don't forget to add onError
with every call, since it is 5, you don't want anyone to make a mistake and then the user is stuck forever. So add it and inside each onError
addloader.dismiss();
Hope it helps :)
source to share