Scenario:
we have a list of items, when i click one of them, the modal is opened to show the details of the item.
Issue:
On slow phones there is a delay (about 2-3 seconds) between the click and the modal actually being shown.
How to reproduce:
- go to: https://ionicframework.com/docs/api/modal
- open the chrome developer tools (F12)
- clic on the “Performance” tab.
- set the CPU throttling to “4x slowdown” or “6x slowndown”.

- Clic on the “Show Modal” of the page (open and close several times, every time will be a delay)

So my question is. Is there any way to avoid the modal to be created and destroyed every time? Since i know that it will be used multiple time with the same template (component), can i cached it to be reused and save the time that takes create it again and again?
Thanks!
1 Like
Hi alexmigwi
Thanks for your suguestion, but using accordions will change the current behavior, as will do using a route. Also the information into the modal will be to much for a acording to not affec the user experience.
You can try use css, example:
When the click user in button close, you can use visibility: hidden and when the click user in show modal you use visibility: visible;
Observation:
If you send big information to modal, it will really take time to load, you can consider use some state managment , for example Ngrx.
One perhaps controversial thing you can do is to completely forget that lazy loading exists. Put everything in a single AppModule
.
Thanks for your observation, actually I’m sendding an object to the modal, i’ll try using some service to tranfer the data and let you know.
I’m pre-loading everything, even ionic components (ion-input, ion-toggle, etc), it looks like the issue is not related with the network. I would guess it takes too long rendering. Since you can reproduce it using https://ionicframework.com/docs/api/modal, would say it is not data related either.