feat: Modal with router

[pritamsoni-hsr]

Feature Request

Ionic version:

[x] 5.x

Describe the Feature Request

Having a modal which is always present in the Dom (once activated for the first time, like tabs).
Many times, same modal is presented multiple times, and rendering it every single time is expensive.
React Native Expo does uses the same thing, bind modal to a route, can we expect this is ionic 6 maybe?

Describe Preferred Solution

Describe Alternatives

Related Code

Additional Context

[liamdebeasi]

Thanks for the feature request. I am going to close this as this is not something we are looking to add to the framework at this time.

We do not feel that it would be correct to take a temporary component such as ion-modal and link it with the global state of the router. This could lead to many inconsistencies. For example, if a user lands on the url /app/show-signup-modal which presents a sign up modal, what should be shown underneath the modal? Additionally, what should happen when the user decides to cancel out the modal? The modal is very much dependent on the context in which it was presented. This is something we lose by integrating these kinds of components with the router.

That being said, opening a single modal (even if opened multiple times) should have a very small performance footprint. Are you running into performance issues when opening a modal in Ionic Framework?

[pritamsoni-hsr]

Not like any major lag, requests can be cached, but there is a tiny rendering dealy, mainly because of the the other heavy computation, context does fix this issue as well, just thought it would be a good to have feature.
say for example if someone want to build a music app, like iTunes or spotify, they are gonna display a modal for quick control and having it re-render everything is can be an issue not a big one tho.
That being said, possible design approach for such element would be having a router or some props to IonModal and its placement within the app, inside RouterOutlet or Switch (React) would let us design whether it is a normal modal (like the one we have) vs the other and for the latter case we can ignore the "context stuff".
It will always be presented on top of some page(thats how developers gonna use it), otherwise just raise a pre-check warning or error.
Isn't there any other way we can keep it in the dom?

[liamdebeasi]

There is a feature request open for a reusable modal (I.e. reusing the modal instance): #20263. If this is something that would be useful for your application, I would recommend posting a use case on that thread (An example of the performance issues you are running into currently would be great too!). These are very helpful when the team meets to figure out which features to add to the framework. Thanks!

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