bug: ion-loading is not removed from dom if never presented

[aparajita]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

Hey @liamdebeasi, when I dismiss an ion-loading created by a controller that has never been presented, it is not removed from the dom, leading to a fairly large memory leak.

Expected Behavior

One of two fixes:

• When an ion-loading is dismissed, it should be removed from the dom. This is the ideal.
• Clearly document that if present() is not called after loadingController.create(), dismiss() will be a no-op and there will be a memory leak.

Steps to Reproduce

1. Create an ion-loading with loadingController.create(). An ion-loading is added to the dom.
2. Do not call present().
3. Call dismiss(). The ion-loading is not removed from the dom.

Code Reproduction URL

https://stackblitz.com/edit/a1fkix?file=src%2Fcomponents%2FExample.vue

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/monorepo/node_modules/.pnpm/@Ionic+cli@7.2.0/node_modules/@ionic/cli)

Capacitor:

Capacitor CLI : 5.6.0
@capacitor/android : 5.6.0 (/monorepo/node_modules/.pnpm/@capacitor+android@5.6.0_@capacitor+core@5.6.0/node_modules/@capacitor/android)
@capacitor/core : 5.6.0 (/monorepo/node_modules/.pnpm/@capacitor+core@5.6.0/node_modules/@capacitor/core)
@capacitor/ios : 5.6.0 (/monorepo/node_modules/.pnpm/@capacitor+ios@5.6.0_@capacitor+core@5.6.0/node_modules/@capacitor/ios)

Utility:

cordova-res : not installed globally
native-run : not installed globally

System:

NodeJS : v21.4.0 (/path/to/Library/pnpm/nodejs/21.4.0/bin/node)
npm : 10.2.4
OS : macOS Unknown

Additional Information

Here's the context:

When loading data from the back end, I call a useLoading function that does not display the ion-loading until a delay has elapsed, since there is no point in showing the loader if the data comes back quickly.

Currently I am creating the ion-loading and then only presenting it if the delay elapses. I can obviously work around the current behavior by changing my code so that the ion-loading is not creating until after the delay has elapsed. Probably a better approach anyway, since there is no point in executing all of the code to create the ion-loading, and updating the dom, if it will not be displayed.

[liamdebeasi]

Have you tried calling loading.remove() instead of .dismiss()? This will explicitly remove the element from the DOM. Dismissing an overlay means to move the overlay from an open to closed state. Since the overlay is already in the closed state, nothing happens.

[aparajita]

Have you tried calling loading.remove() instead of .dismiss()?

No, that method is not documented, so I had no idea it existed. In any case I reworked my code to not create the loading until it is going to be presented. But perhaps the documentation should be updated to cover the issue I ran into and to surface the remove() method.

[liamdebeasi]

remove is a browser API available on any Element so all Ionic components (and regular elements such as a <div>) automatically have access to this.

I'm going to close this since Ionic is working as intended here. However, I'll update the documentation to note this in the dismiss docs since I think it is helpful to call it out.

[ionitron-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.