Loading and Navigation

need help, page not navigating when i implement loading component, but when i remove it, its working. here is my code;

HTML

1. Gamuchira Mweya Wangu 2. Murapi Aripano (56)

TS

showloading() {
this.loadingController.create({
message:“Loading…”

}).then((overlay)=> {
this.loading = overlay;
this.loading.present();

setTimeout(()=>{
  this.loading.dismiss();
  this.navCtrl.navigateRoot('./gamuchira-mweya-wangu');

}, 3500);

})

}

}

another method i’m tryna use; only with html

1. Gamuchira Mweya Wangu

HTML;

//
<a href="./hymns-home/gamuchira-mweya-wangu" (click)=“showloading()”>1. Gamuchira Mweya Wangu

If I were a browser, I would have no idea what to do with an <a> element that has both a href attribute and a (click) handler. Which should I invoke? Also, is there a reason you’re making users wait 3.5 seconds? There are so many posts on these forums from people asking how to make apps more responsive; it’s unusual to see one deliberately making it less so.

so what the way can you suggest to do it for me

implement both navigation and the loading in the same showloading() method. it would be much easier and less buggy…Still you did not solved this, tell me I will provide a example.