bug: Alerts are always displayed behind loading indicators making them inaccessible

[davidgeary]

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

v8.x

Current Behavior

I have a use-case where a loading indicator (ion-loading) is being displayed during a data import process. If the data already exists, an alert (ion-alert) is then displayed, requesting confirmation to overwrite the data. Once the alert is dismissed, the loading indicator continues to be displayed until the process completes.

In this scenario, when the alert is displayed, it is behind the loading indicator's overlay. This means that not only is the alert obscured by the loading indicator, even if its buttons are visible, they cannot be clicked by the end user. (Note that the ion-alert is always created after the ion-loading has been displayed.)

Expected Behavior

Ideally, each overlay-based component would be assigned a z-index higher than any previously-created component, ensuring that they are 'stacked' on-screen in the order that they are created. Indeed, this is how it is described in another - presumably, now out-of-date - issue (see #22339 (comment)).

Steps to Reproduce

1. Clone the test repo
2. Run the application with ng serve
3. Open http://localhost:4200/ in a web browser

The web app will open its home page, displaying first an ion-loading component, then displaying an ion-alert component.

You should see that the alert is behind the loading indicator, preventing it from being seen clearly and stopping its buttons from being clicked.

Code Reproduction URL

https://github.com/davidgeary/zindex-test

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (C:\Users\Xxxxxxxxxxx\AppData\Roaming\nvm\v20.14.0\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 8.4.0
@angular-devkit/build-angular : 18.2.12
@angular-devkit/schematics : 18.2.12
@angular/cli : 18.2.12
@ionic/angular-toolkit : 11.0.1

Capacitor:

Capacitor CLI : 6.2.0
@capacitor/android : not installed
@capacitor/core : 6.2.0
@capacitor/ios : not installed

Utility:

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

System:

NodeJS : v20.14.0 (C:\Program Files\nodejs\node.exe)
npm : 10.7.0
OS : Windows 10

Additional Information

From the code, it appears that the overlay-based components have their z-indexes hard-coded, with each component being assigned a z-index of a 'base' value plus the overlay id of the component. So while components using the same base value will appear stacked in the order they are created, overall the components have an on-screen hierarchy enforced by the base value:

• ion-toast: 60000
• ion-loading: 40000
• ion-action-sheet: 20000
• ion-alert: 20000
• ion-modal: 20000
• ion-picker-legacy: 20000
• ion-popover: 20000

So regardless of which component is created first, ion-loadings will always appear above ion-alerts.

(Also, because the z-index is assigned directly as a style attribute to each individual component, overriding it requires a specific custom CSS class where the z-index property is marked as !important.)

While there is possibly an argument that ion-toasts should always appear at the top of any stack, I think overlay components should - as a general rule - always appear in the order that they are created. Changing the base value of the ion-loading component to 20000 would accomplish this.