Ionic-framework: Ionic v2 - Loading component throw error when trying to present after dismiss

[lricoy]

Short description of the problem:

If you try to reuse a Loading component after calling dismiss() on it, it will throw a quite unclear error message.

At first, looking at the docs, I would imagine that the Loading component is reusable and that we only need to call .create() to config the desired look and behavior but It turns out that if the loader is dismissed, you can't use it again. I am not sure if that is a bug or the expected behavior. If it is, I believe something like .dispose() instead of dismiss() would be more clear.

See plunkers below for cases with and without the issue.

What behavior are you expecting?

No error.

Steps to reproduce:

1. Create a Loader
2. Call .nav.present(loader) to show it.
3. Programatically dismiss the loader
4. Try calling .nav.present(loader) again.

  loading: Loading = Loading.create({
      content: "Please wait..."
    });

  loadData() {
    this.nav.present(this.loading);
    setTimeout(() => {
        this.loading.dismiss();
    }, 1500);
  }

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

Attempt to use a dehydrated detector: HostLoadingCmp_0
ORIGINAL STACKTRACE:
Error: Attempt to use a dehydrated detector: HostLoadingCmp_0
    at DehydratedException.BaseException [as constructor] (https://code.angularjs.org/2.0.0-beta.15/angular2.dev.js:7587:21)
    at new DehydratedException (https://code.angularjs.org/2.0.0-beta.15/angular2.dev.js:4944:14)
    at AbstractChangeDetector.throwDehydratedError (https://code.angularjs.org/2.0.0-beta.15/angular2.dev.js:9807:13)
    at AbstractChangeDetector.detectChangesInRecords (https://code.angularjs.org/2.0.0-beta.15/angular2.dev.js:9686:14)
    at AbstractChangeDetector.runDetectChanges (https://code.angularjs.org/2.0.0-beta.15/angular2.dev.js:9672:12)
    at AbstractChangeDetector.detectChanges (https://code.angularjs.org/2.0.0-beta.15/angular2.dev.js:9661:12)
    at ChangeDetectorRef_.detectChanges (https://code.angularjs.org/2.0.0-beta.15/angular2.dev.js:5280:16)
    at Loading.willEnter (https://npmcdn.com/[email protected]/bundles/ionic.system.js:26406:38)
    at Portal._postRender (https://npmcdn.com/[email protected]/bundles/ionic.system.js:24306:46)
    at Portal._render (https://npmcdn.com/[email protected]/bundles/ionic.system.js:24238:34)
ERROR CONTEXT:

Which Ionic Version? 1.x or 2.x
2.x
.beta.6

Plunker that shows an example of your issue

-With the issue:
http://plnkr.co/edit/LY1wi7fh5AxeRNoDzOan?p=preview

-No issue when always re-creating the loader:
http://plnkr.co/edit/PgRxBtAnglTVaxfelq8i?p=preview

Run ionic info from terminal/cmd prompt: (paste output below)

Cordova CLI: 5.4.1
Gulp version: CLI version 3.9.0
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.6
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
ios-deploy version: 1.8.4
ios-sim version: 5.0.6
OS: Mac OS X El Capitan
Node Version: v4.0.0
Xcode version: Xcode 7.3 Build version 7D175

[iignatov]

IMHO this is the expected behavior for this kind of _temporary_ components like Loading, Alert, etc... However I agree with your comments that this should be explained in the documentation and probably handled somehow in the code _(e.g. after the component is dismissed it probably should display a clear error message when trying to reuse/dismiss it again)_. In your case I would suggest you instead of storing the preconfigured component, to use a method to create it preconfigured as needed instead:

loadData() {
  let loading: Loading = createLoader();
  this.nav.present(loading);
  setTimeout(() => {
    loading.dismiss();
  }, 1500);
}

createLoader() {
  return Loading.create({
    content: "Please wait..."
  });
}

[lricoy]

@iignatov I agree with you. After I figured out what was going on, I thought it was the expected behavior, but the error message made it quite troublesome to figure it out.

For my case, I ended up doing what you suggested.

[jgw96]

Hello @lricoy and @iignatov ! I have opened an issue over on the ionic-site repo to get better documentation on this behavior: https://github.com/driftyco/ionic-site/issues/597 . Feel free to chime in over there if you have anything to add! I am going to close this issue for now and make the above linked issue the "tracking" issue for this.

[srishiva89]

How to write unit test case for this "Loading" component? If any examples are available, Please share it.,

[audacitus]

It would have been convenient for this to be reusable. In addition, the same issue presents itself when pushing from one ionic page to another, when both pages are using loading controller like so:

LoginPage.ts: Creating/Presenting a Loader while user is authenticated, and then dismissed before pushing homePage
HomePage.ts: Another Loader is created for an api fetch, but fails to dismiss on success of fetch

I solved this by only using the loader on the HomePage.ts Class and the loader worked.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.