Show Alert in front of ionic-loading UI

Ionic Framework
1

I am finding that Ionic 4 displays alerts underneath the Loading UI, so that the alert can’t be seen or buttons pressed. Ionic 2 use to put alerts in front. Is there anyway to ensure that alerts always appear in front of a Loading UI or similar modal UIs?

Thanks
Jason

2

If you don’t get any better answers, I would consider it an app bug to have a situation where both an alert and a loading indicator are active at the same time, and try to ensure that never happens in the first place.

3

Thank you for the quick response.

Here’s my take on the general problem.

There’s the watcher and the watchee. The watcher is the UI that is monitoring progress (the loader, or progress meter or something), which just happens to have a modal UI. Then there’s watchee - a complicated business process which could require input from the user. The watchee does not know it’s being watched. i.e. it doesn’t now there is a modal progress UI on the screen. It should be able to request input (a prompt alert) using it’s own UI, regardless of what watcher UI is running.

The particulars of the Ionic UIs create a conflict with the modal watcher UI (a loader) and the watchee UI (an alert). What is needed is a moderator that deals with the collision of the two modal UIs.

I implemented such a moderator. The moderator provides APIs for accessing the underlying Ionic APIs, alerts, loaders, etc. It knows what UIs are being displayed at all times. When an alert is displayed, it suspends the Loader while the alert is on the screen, then restored it the alert is closed. I’d prefer a solution where I could just specify whether an alert should be front most or not. Way simpler.

I’ll wait to see what kind of answers come in. Either way, I have my workaround solution for now.

Thank you :slight_smile:

4

I think the bolded part is where we disagree.

To me, the presence of a loading spinner overlay or a modal progress indicator carries with it the implication that:

  • the app isn’t frozen, but:
  • it can’t accept any more meaningful input until some process finishes, except:
  • to potentially cancel the currently blocking task and put things back to the state before said task started

I’m having a bit of a tough time envisioning an example of what you mean by “complicated business process which could require input from the user”. If you’re talking about something like a trip booking wizard where the user selects a destination in one screen, and then a departure date in another, and whether a hotel is needed in a third, then I can’t think of a situation where one would simultaneously be wanting user input and waiting for some external process to complete. If the user input is related to the long-running operation, like “hey, this search is taking forever. do you want to add additional search criteria to narrow things down?”, then I think as a user I would consider the operation to have been paused if not cancelled while I make my decision about how to proceed. Even if the search is still running on some server somewhere, as far as the app universe is concerned, it’s paused, and the attendant loading indicator should be hidden at least temporarily.

As I was typing that paragraph, one more idea came to mind, which was “sorry this search is taking forever. how about answering a survey while you wait?”. And in that situation, I think what I would want as a user would be to still have the search progress indicator somewhere in the top-of-view window, so as a designer I would tear down the dedicated progress modal, then pop the survey modal with the progress indicator included as part of it (as a subcomponent).

I’ve definitely felt the urge to create such things before (I tend to call them “overseers”), and in retrospect more often than not they eventually end up on the scrap heap because the initial assumptions I (generally implicitly) baked into them ended up not scaling real well.

If we back up a bit and ignore all the technical bits, a modal overlay indicates to the user “nothing else meaningful can be done while I’m here, so if I’m interactable, you have to give me what I want before proceeding, or if I’m not, you have to wait”. I still think that implies that they’re Highlanders.

5

I hear you. And interesting design issue. Unfortunately, I don’t have the luxury of rewiring the app at his time. It’s a portion of a very large application. The need to have an interstitial alert displayed while displaying the Loader came long after I originally wrote this code.

It’s a login UI. Originally, after entering user/password, the Loader was displayed and an undetermined amount of data was downloaded.

Then a login variant came into play in which depending on the user’s profile, which must first be downloaded as part of the login process, the user could then be offered different login doors to go through. Once picking the door (answering an alert), the login/download process proceeds. If the user profile determined that no login options were available (just one door), then there was no need to ask the user anything. In this case the Loader UI is never interrupted.

So, in the end, I’m trying to solve a simple problem to deal with an edge case in an evolving login UI. Ionic 2 displayed alerts in front of loaders so there was no problem. But Ionic4 displays alerts behind loaders.

Anyway, thanks for your input. Onward and upward or something like that.

1 Like
6

Disclaimer: totally unmaintainable kludgefest follows. Nobody should use or emulate this code, and if questioned, I’ll deny I ever wrote it.

Perusing the Ionic source, each flavor of overlays gets its own virtual layer: alerts go in the 20000s and loaders in the 40000s. I assume you can do this bletchery in your overseer, but here’s a proof of concept that does it at pop time:

  ionViewWillEnter(): void {
    let loader$ = this.loaders.create();
    loader$.then(loader => {
      loader.present();
    });

    let alert$ = this.alerts.create();
    alert$.then(alert => {
      alert.style.cssText = "z-index: 50123;";
      alert.present();
    });
  }

Obviously, if it breaks you get to keep both halves, and there are outstanding concerns about stuff like “what to do about clicks on backdrops”, but I believe this at least points you to a rusty-beer-can-surgery technique that may be of use.

1 Like
7

Happy New Year. Thanks so much for this solution. It worked like a charm.

I have a related question, which is how to put a cancel button in an Loading UI. This doesn’t seem to be a feature, and would be certainly be very useful. I only see an option to dismiss by clicking in the background, which is not an obvious UI. Basically, I want the “tired of waiting” button.

Thanks so much
Jason

8

I suspect it would probably be easier to roll your own popover component with a spinning icon and a cancel button and use that instead of the stock loading indicator.