Please describe theI 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 ? question in detail and share your code, configuration, and other relevant info.