[Ionic 5] - dismissOnPageChange

Ionic Framework
1

Hi, how are you? Yes, I know “dismissOnPageChange” is not working in Ionic 5, I tried to do this:

Property Removed
The dismissOnPageChange property of the create was removed from Loading & Toast. All of the navigation API is promise based and there are global events ( ionNavWillChange , ionNavDidChange ) that you can listen to in order to detect when navigation occurs.

Old Usage Example:

openLoading() {
  let loading = this.loadingCtrl.create({
    content: 'Loading...',
    dismissOnPageChange: true
  });
}

New Usage Example:

async openLoading() {
  let loading = this.loadingCtrl.create({
    message: 'Loading...'
  });
  await loading.present();
  const { role, data } = await loading.onDidDismiss();
  console.log('Loading dismissed!');
}

My expect behavior is: When the page loads the “Loading” is shown, when the page is loaded completely, the “Loading” must be dismissed, as I told you, in the same way as before in another versions of Ionic like the version 3.

2

Hey, you can try something like this:

yourLoader: HTMLIonLoadingElement;

constructor(
    public loadingController: LoadingController,
    ...
) {}

async presentLoading() {
    this.yourLoader = await this.loadingController.create({
      message: 'Loading...'
    });
    await this.yourLoader.present();
  }

async dismissLoading() {
    if (this.yourLoader) {
      await this.yourLoader.dismiss();
    }
}

You will execute the presentLoading when entering the page and the dismissLoading once your page is ready.

Check this demo with different loading strategies you can use to load data in your Ionic apps. Everything is explained here.

3

Allow me to try to convince you that you shouldn’t, though.

I treat loading elements like blocks of memory allocated by malloc:

  • you must dismiss them once and only once;
  • you must not do anything with them after they’ve been disposed

A substantial number of very consequential bugs in history have been caused by insufficient ownership management of malloced memory. The most reliable way to avoid them is to never allow external access to pointers. If the pointer is never exposed to any other code, it’s clear who owns it. Stashing it in a controller property like this, especially a public one, means that any method in this component or anywhere with access to the component controller (like the template, for instance) can mess with yourLoader.

If you always keep all loading instances in lexically-scoped variables (or never even assign them to anything at all, which is generally totally doable), you drastically limit the scope of who can access them.

With modern Ionic versions, you can call dismiss on the LoadingController, which is a safer alternative.