Error: Uncaught (in promise): TypeError: Cannot read property 'dismiss' of undefined in ionic 5 - ionic-framework

Question

I am building an app with ionic 5, i want to show ion-loader when a user tries to login, and after a response is gotten from the server, it will dismiss the ion-loader, but when i tried it, i got this error
Error: Uncaught (in promise): TypeError: Cannot read property 'dismiss' of undefined
here is my code
import { Component, OnInit } from '#angular/core';
import { HomePage } from '../home/home.page';
import { NavController, AlertController, LoadingController } from '#ionic/angular';
import { AuthServiceService } from '../auth-service.service';
#Component({
selector: 'app-login',
templateUrl: './login.page.html',
styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
ngOnInit() {
}
registerCredentials = { email: '', password: '' };
loaderToShow: any;
constructor(
public navCtrl: NavController,
private auth: AuthServiceService,
private alertCtrl: AlertController,
private loadingCtrl: LoadingController
) {
console.log(this.registerCredentials);
}
public login() {
this.showLoading();
this.auth.login(this.registerCredentials).subscribe(allowed => {
if (allowed) {
this.loaderToShow.dismiss();
console.log('canceal')
} else {
this.showError('Access Denied');
}
}, error => {
this.showError(error);
});
}
public async showLoading() {
this.loaderToShow = await this.loadingCtrl.create({
message: 'Please Wait...'
});
await this.loaderToShow.present();
}
public async showError(text) {
this.loaderToShow.dismiss();
let alert = await this.alertCtrl.create({
header: 'Fail',
message: text,
buttons: ['OK']
});
await alert.present();
}
}
Pls how can i properly dismiss the ion-loader

Answer 1

Create a hideLoading() method like below can call it when you want to hide the loading circle.
async hideLoading() {
this.loadingController.getTop().then(loader => {
if (loader) {
loader.dismiss();
}
});
}
I created below class to handle show hide of loading in my ionic application.
loading.service.ts
import { Injectable } from '#angular/core';
import { LoadingController } from '#ionic/angular';
#Injectable({
providedIn: 'root'
})
export class LoadingService {
isLoading = false;
constructor(public loadingController: LoadingController) { }
async showLoading(message?: string) {
this.isLoading = true;
this.loadingController.create({
message: message ? message : 'Please wait...'
}).then(loader => {
loader.present().then(() => {
if (!this.isLoading) {
loader.dismiss();
}
});
});
}
async hideLoading() {
this.isLoading = false;
this.loadingController.getTop().then(loader => {
if (loader) {
loader.dismiss();
}
});
}
}
Usage in a component:
export class SomePage implements OnInit {
subscription: Subscription;
constructor(private loadingService: LoadingService) { }
someMethod(updateNameForm: NgForm) {
this.loadingService.showLoading();
this.someService.someMethod().subscribe(response => {
// Some code
});
this.subscription.add(() => {
this.loadingService.hideLoading();
});
}
}
}

Answer 2

The solution is to add await to the call of the function showLoading
public login() {
await this.showLoading();
this.auth.login(this.registerCredentials).subscribe(allowed => {
if (allowed) {
this.loaderToShow.dismiss();
console.log('canceal')`enter code here`
} else {`enter code here`
this.showError('Access Denied');
}
}, error => {
this.showError(error);
});
}
async showLoading() {
this.loaderToShow = await this.loadingCtrl.create({
message: 'Please Wait...'
});
await this.loaderToShow.present();
}
async showError(text) {
await this.loaderToShow.dismiss();
let alert = await this.alertCtrl.create({
header: 'Fail',
message: text,
buttons: ['OK']
});
await alert.present();
}