Modal & Popover take too long to show up

Hello guys,

I implemented modal html page and popover component properly on my Ionic app.

I declared them on app.module.ts

and on my home.ts:

import { NavController, Platform, ModalController, NavParams, PopoverController } from 'ionic-angular';
import { PopoverComponent } from '../../components/popover/popover';

in constructor:

    public modal: ModalController, 
    private popoverCtrl: PopoverController,

and function:

openModal() {
  const myModal = this.modal.create('ModalPage');

presentPopover(myEvent) {
  let popover = this.popoverCtrl.create(PopoverComponent);
    ev: myEvent

Both modal and popover takes more than 2 seconds to show up once I tap on a button. There’s absolutely nothing on modal & popover yet.
Is there any way to make them show up faster… likely in 0.2 - 0.5 second?
I have a lot of things going on in a single HTML file and I guess things started to slow down but I wonder why simple html & javascript and a few plugins are slowing down the app I’m working on.
I feel overall app feels chunky and slow on my smartphone although it runs well on my browser lab.

Thanks in advance,

This code on its own doesnt show anything odd (except for the lazyloading in modal) that may be optimised

So u need to look at the other code and either have them delayed, asynced, optimised

1 Like

That’s why I’m puzzled… I created a series of CSS3 animations triggered by a button. Ever since I feel everything’s slowed down. I tried to use Angular animations but it can’t be looped easily unlike CSS3 animations.
Could that be a factor?
What should I do to speed up my app? There’s nothing wrong with codes but there are buttons which trigger many functions at a time.

I notice some of the same, but chalk it up to there being a difference in performance between an msi ge62 ApachePro and an iPhone 5.
2 seconds+ seems unusually long though…

I tend to make modals out of pages as opposed to components and the performance seems better, but it may be a matter of perception instead of fact.

1 Like

Yes… Angular is powerful but somehow it has problems with speed when it’s implemented in smartphone OS.
I will try that. If it doesn’t work, maybe I will create a div that pops up on click… and get rid of modal & popover.
I think it should show up immediately upon tap.
My current buttons trigger up to 10 functions at a time… maybe that’s causing delay?

Is your button actually a button, or is it a div that you made clickable?

1 Like

Sure they can, just set up a timer and toggle between ‘states’:


1 Like

Yes, it has 5 functions assigned to button and another 5 functions to a div that containing it. Is this a really bad practice?

Yes. Only one click per button. And if it isn’t a button, you need to add the tappable directive so Ionic knows to check for clicks.

1 Like

Cool, will try to fix that now… and see if anything improves. A lot of complicated work is done on animations.

Thanks for the example and github files!
I’ll take a look into it. On my app, everything works fine with sacrifice of speed. yeah there’s always a way to work around it.