Modal & Popover take too long to show up

[jamesharvey]

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,

[Tommertom]

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

[jamesharvey]

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.

[jaydz]

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.

[jamesharvey]

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?

[AaronSterling]

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

[robinyo]

@jamesharvey

I tried to use Angular animations but it can’t be looped easily unlike CSS3 animations.

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

See:

• Angular
• https://github.com/Robinyo/big-top/blob/master/src/pages/sign-in/sign-in.html
• https://github.com/Robinyo/big-top/blob/master/src/pages/sign-in/sign-in.ts

[jamesharvey]

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

[AaronSterling]

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.

[jamesharvey]

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

300ms delay beta2

When applying the <button ion-item (click)="doSomething()"> instead of <ion-item ...> the funny thing is, that the delay is only removed when clicking the arrow icon in the button, not the button by itself. When tapping the icon, it behaves like it’s supposed to, but other than that is has a delay or need te be clicked twice, especially when coming back from another page…

(click) Vs (tap)

Hi All, I read in one of the blogs that the use of (click) in Ionic apps adds up to 300ms as the “WebView” (where the app runs in a device) is essentially a browser and as a inherent behavior would wait for short span of time (300ms) to see if the user intend to do a “single-click” or a “double-click”. So, even though it’s only 300ms, we can save that time and optimize our app by replacing all (click) with (tap). Would appreciate if someone could shed more light and insights on this. I have a…

[jamesharvey]

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.