Modal & Popover take too long to show up

Ionic Framework ionic-v3
1

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');
  myModal.present();
}

presentPopover(myEvent) {
  let popover = this.popoverCtrl.create(PopoverComponent);
  popover.present({
    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,

2

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

3

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.

4

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.

5

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?

6

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

7

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

santa-state
santa-state372×660 1.29 MB

See:

8

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

9

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.

10

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

11

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.