Components are not loaded and shown properly when there are concurrent calls to NavigatorController.present()

[likerRr]

Short description of the problem:

When there are concurent calls to NavigatorControllers present() method, some of components don't properly loaded and shown, e.g.:

nav.present(loading);
nav.present(toast);

It seems that the last call to present() prevents all the previous calls to present().

What behavior are you expecting?

Both of loading and toast components are loaded and shown properly and promises from present method resolve as they should do. After 1500ms loading component should be dismissed.

Steps to reproduce:

In all three cases expected behavior is the same and described in the section above.

Open plunker page for demos.

Case 1:

Click Start button

• Move your mouse over the Start button and you will see, that there is a transparent overlay.
• this.nav.present(loading) isn't resolved

Case 2:

Open home.ts file and comment 'Case 1' code and uncomment Case 2 code. Click Start button.

• Loading dialog is shown, but it won't be removed after 1500 ms
• this.nav.present(loading) isn't resolved

Case 3:

Comment 'Case 2' code and uncomment Case 3 code. Click Start button.

• Loading dialog isn't shown
• this.nav.present(loading) is resolved

Other information:
I think #6209 can somehow be related to this issue, but I'm not sure.
#7342

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

Plunker that shows an example of your issue

http://plnkr.co/edit/jHg2QDBIPs5NRTTUdxL7?p=preview

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

Cordova CLI: 6.3.0
Gulp version: CLI version 3.9.0
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.0.0-beta.32
Ionic App Lib Version: 2.0.0-beta.18
OS: (it was empty, but my OS is Win10)
Node Version: v5.10.1

[Kobzol]

The present method is asynchronous, so you have to wait for it to complete before you make any other present calls.
Your code should thus look like this:

this.nav.present(loading)
        .then(() => this.nav.present(toast))

Or the other way around, if you want to show the loading after the toast.
With this code the loading is correctly dismissed after 1500 ms.

[likerRr]

I can't do it such way. My loading and toast components are wrapped by a services and I just want to call 'show/hide' methods of these services without thinking of do the previous present method was resolved somewhere in my app.

I think about extending NavigatorController class and override the present method there to make a kind of queue and wait until the previous present is resolved before making call to another present. I'll try to implement this concept today, but why it can't be done in Ionic natively?

[Kobzol]

You can suggest the queuing behaviour to the Ionic team, but I don't think that it is necessary for it to be directly in the framework. Although I agree that it is a source of confusion, this is not the first issue that has problems with it #7342.

I'm using something similar (toast + loading) in my own application and a single UI service that handles all of those items is sufficient I think. You can easily create the queue or buffer for the UI elements and show them in the order that you want.

BTW in the next beta release, the presentable UI components (toast, loading, popover etc.) are reworked a little bit and they are now using a controller that creates the UI component and you then call present on that component directly.

[likerRr]

You are right current behavior is confusing and a lot of issues as the evidence.

But will the reworked components use NavigatorController's present under the hood or some other mechanism? If yes, the issues still will be.

[jgw96]

Hello, thanks for opening an issue with us! So at this time all our overlay components are async, so you have to wait for one to dismiss before you can open another one using promises. In beta.11 we have changed the way that overlay components work so that they are no longer part of the nav stack, but it is still async using promises and you can still only have one open at a time. There are multiple reasons for this but some of the main reasons are that it is very similar to how alerts work on native ios and android, and that it allows for more performant animations. At this time we do not plan on making it possible to present multiple components at a time. Hope this explains everything well, thanks for using Ionic!

[likerRr]

@jgw96 Hello, thanks for answering. Please, clarify, you mean that in beta.11 I won't be able to show loading and toast components at the one moment? Even if I wait until one of them resolves?

[jgw96]

@likerRr Sorry for not being clear! You will be able to show a loading and toast component at the same time, but not multiple overlay components of the same type at the same time. Thanks!