Ionic 4: Randomly LoadingController.dismiss() doesn't work


#1

I fetch some data from API then I use the RXJS operator finalize() to dismiss the loading overlay but randomly it stays on screen.

The workaround I’m using is to present the dialog with a long duration and this seems to work, but I would understand why sometime it works and sometime it doesn’t, is my code, shown below, incorrect?

Consider the output log is always the same, so the finalize() is called correctly.

getMenu start
getMenu inside subscribe
getMenu before dismiss inside finalize
getMenu after dismiss inside finalize   
  private startFetchMenu() {
    this.presentLoading().then(() => {
      this.fetchMenu();
    });
  }


  fetchMenu() {
    console.log('getMenu start');
    this.menuService.getMenu('en')
      .pipe(
        finalize(() => {
          console.log('getMenu before dismiss inside finalize');
          this.loadingController.dismiss();
          console.log('getMenu after dismiss inside finalize');
        })
      )
      .subscribe(menu => {
        this.menu = menu.data;
        console.log('getMenu inside subscribe');
      }, error => {
        console.error(error);
      });
  }
  private async presentLoading() {
    await (await this.loadingController.create({duration: 6000})).present();
  }

Environment

Ionic:

   ionic (Ionic CLI)             : 4.7.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-rc.0
   @angular-devkit/build-angular : 0.10.7
   @angular-devkit/schematics    : 7.1.4
   @angular/cli                  : 7.0.7
   @ionic/angular-toolkit        : 1.2.2

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.1, (and 7 other plugins)

System:

   NodeJS : v10.9.0 (/usr/local/Cellar/node/10.9.0/bin/node)
   npm    : 6.5.0
   OS     : macOS Mojave
   Xcode  : Xcode 10.1 Build version 10B61