Dev.W
Dev.W

Reputation: 2370

Error trying to dismiss Ionic Loader

I have an Ionic3 application which posts data to an API based on an action, whilst waiting for the action to complete I show a loader using Ionic's LoadingController.

import { LoadingController } from 'ionic-angular';

I declare the loader by:

this.loader = this.loadingCtrl.create({
   content: "Please wait..."
});

I then use the loader:

doSomething(item) {

    this.loader.present().then(()=>{

      this.item.begin(item).then((result) => {

        this.data = result;
        this.loader.dismiss();

      }, (error) => {
        console.log(error);
        this.loader.dismiss();
      });

    });

  }

I get the error:

ERROR Error: Uncaught (in promise): inserted view was already destroyed

Can someone point me in the right direction?

Environment:

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.10.2
    ionic (Ionic CLI) : 3.10.3

global packages:

    Cordova CLI : 7.0.1

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : ios 4.4.0
    Ionic Framework    : ionic-angular 3.6.1

System:

    ios-deploy : 1.9.2
    Node       : v7.7.1
    npm        : 4.1.2
    OS         : macOS Sierra
    Xcode      : Xcode 9.0 Build version 9A235

Upvotes: 0

Views: 883

Answers (1)

Jean Guzman
Jean Guzman

Reputation: 2202

from loading controller doc

Note that after the component is dismissed, it will not be usable anymore and another one must be created. This can be avoided by wrapping the creation and presentation of the component in a reusable function as shown in the usage section below.

So your error it's because you have the create and present split.

import { LoadingController } from 'ionic-angular';

constructor(public loadingCtrl: LoadingController) { }

presentLoadingDefault() {
  const loading = this.loadingCtrl.create({
    content: 'Please wait...'
  });

  loading.present();

  setTimeout(() => {
    loading.dismiss();
  }, 5000);
}

Upvotes: 1

Related Questions