Ionic loading controller keep presenting even after dismiss() called - angularjs

Question

I have used the loading controller as a separate service, and called the present and dismiss methods inside http interceptor, but even after the request is released by interceptor and dismiss method is called, loading modal keep loading in UI,
interceptor code,
removeRequest(req: HttpRequest<any>) {
const i = this.requests.indexOf(req);
if (i >= 0) {
this.requests.splice(i, 1);
}
}
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
this.loadingCtrl.present();
this.requests.push(request);
return Observable.create(observer => {
const subscription = next.handle(request)
.subscribe(
event => {
if (event instanceof HttpResponse) {
this.removeRequest(request);
observer.next(event);
}
},
err => {
this.removeRequest(request);
observer.error(err);
this.toastor.presentToast(err.message);
},
() => {
this.removeRequest(request);
observer.complete();
this.loadingCtrl.dismiss();
});
return () => {
this.removeRequest(request);
subscription.unsubscribe();
};
});
}
}
loader controller service
export class LoadingService {
isLoading: boolean = false;
i = 0;
constructor(public loadingController: LoadingController) {}
async present() {
console.log('instance present ', this.i);
this.isLoading = true;
return await this.loadingController
.create({
message: 'Loading.......',
backdropDismiss: true,
})
.then((loader) => {
loader.present().then(() => {
if (!this.isLoading) {
loader.dismiss().then(() => {});
}
});
});
this.i = this.i + 1;
}
async dismiss() {
console.log('instance dismiss', this.i);
this.isLoading = false;
await this.loadingController.getTop().then((hasLoading) => {
if (hasLoading) {
return this.loadingController.dismiss().then(() => {});
}
});
this.i = this.i + 1;
}
}
Any idea why this happens ?

Answer 1

I had a similar problem with Ionic-React. In my case the dismiss executed before the present finished. Both are asynchronous, you should simply await present.