Ionic v5 - Is it posible to cache/reuse Modal for multiple uses?

Ionic Framework Ionic Angular
#1

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:

  1. go to: https://ionicframework.com/docs/api/modal
  2. open the chrome developer tools (F12)
  3. clic on the “Performance” tab.
  4. set the CPU throttling to “4x slowdown” or “6x slowndown”.

image

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

image

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!

#2

Why don’t you instead try or consider an accordion or collapsible component that you can re-use
Examples…
https://www.w3schools.com/howto/howto_js_collapsible.asp

https://www.w3schools.com/howto/howto_js_accordion.asp

image

#3

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.

#4

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.

#5

One perhaps controversial thing you can do is to completely forget that lazy loading exists. Put everything in a single AppModule.

#6

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.

#7

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.