# Modal & Popover take too long to show up

**URL:** <https://forum.ionicframework.com/t/modal-popover-take-too-long-to-show-up/116141>\
**Category:** ionic-v3\
**Created:** [December 21, 2017, 9:05pm UTC](https://forum.ionicframework.com/t/modal-popover-take-too-long-to-show-up/116141 "2017-12-21T21:05:28Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![jamesharvey](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jamesharvey/32/116080_2.png) [@jamesharvey](https://forum.ionicframework.com/u/jamesharvey)\
**Post date:** [December 21, 2017, 9:05pm UTC](https://forum.ionicframework.com/t/modal-popover-take-too-long-to-show-up/116141/1 "2017-12-21T21:05:28Z")

</div>

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:

```auto
    public modal: ModalController, 
    private popoverCtrl: PopoverController,

```

and function:

```auto
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,

---

<div class="post-metadata">

**Author:** ![Tommertom](https://avatars.discourse-cdn.com/v4/letter/t/ed8c4c/32.png) [@Tommertom](https://forum.ionicframework.com/u/Tommertom)\
**Post date:** [December 21, 2017, 9:30pm UTC](https://forum.ionicframework.com/t/modal-popover-take-too-long-to-show-up/116141/2 "2017-12-21T21:30:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jamesharvey](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jamesharvey/32/116080_2.png) [@jamesharvey](https://forum.ionicframework.com/u/jamesharvey)\
**Post date:** [December 21, 2017, 9:59pm UTC](https://forum.ionicframework.com/t/modal-popover-take-too-long-to-show-up/116141/3 "2017-12-21T21:59:31Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jaydz](https://avatars.discourse-cdn.com/v4/letter/j/858c86/32.png) [@jaydz](https://forum.ionicframework.com/u/jaydz)\
**Post date:** [December 21, 2017, 10:02pm UTC](https://forum.ionicframework.com/t/modal-popover-take-too-long-to-show-up/116141/4 "2017-12-21T22:02:00Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jamesharvey](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jamesharvey/32/116080_2.png) [@jamesharvey](https://forum.ionicframework.com/u/jamesharvey)\
**Post date:** [December 21, 2017, 10:05pm UTC](https://forum.ionicframework.com/t/modal-popover-take-too-long-to-show-up/116141/5 "2017-12-21T22:05:21Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![AaronSterling](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@AaronSterling](https://forum.ionicframework.com/u/AaronSterling)\
**Post date:** [December 21, 2017, 10:26pm UTC](https://forum.ionicframework.com/t/modal-popover-take-too-long-to-show-up/116141/6 "2017-12-21T22:26:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![robinyo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/robinyo/32/115964_2.png) [@robinyo](https://forum.ionicframework.com/u/robinyo)\
**Post date:** [December 21, 2017, 10:48pm UTC](https://forum.ionicframework.com/t/modal-popover-take-too-long-to-show-up/116141/7 "2017-12-21T22:48:48Z")

</div>

> [@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’:

 ![santa-state](https://global.discourse-cdn.com/ionicframework/original/3X/c/d/cdf8eff61b845e490d0e9bd5e103d07c098afca2.gif)

See:

- [Angular](https://angular.io/guide/animations#transitioning-between-two-states)
- [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.html)
- [https://github.com/Robinyo/big-top/blob/master/src/pages/sign-in/sign-in.ts](https://github.com/Robinyo/big-top/blob/master/src/pages/sign-in/sign-in.ts)

---

<div class="post-metadata">

**Author:** ![jamesharvey](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jamesharvey/32/116080_2.png) [@jamesharvey](https://forum.ionicframework.com/u/jamesharvey)\
**Post date:** [December 21, 2017, 10:48pm UTC](https://forum.ionicframework.com/t/modal-popover-take-too-long-to-show-up/116141/8 "2017-12-21T22:48:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![AaronSterling](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@AaronSterling](https://forum.ionicframework.com/u/AaronSterling)\
**Post date:** [December 21, 2017, 10:51pm UTC](https://forum.ionicframework.com/t/modal-popover-take-too-long-to-show-up/116141/9 "2017-12-21T22:51:05Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jamesharvey](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jamesharvey/32/116080_2.png) [@jamesharvey](https://forum.ionicframework.com/u/jamesharvey)\
**Post date:** [December 21, 2017, 10:56pm UTC](https://forum.ionicframework.com/t/modal-popover-take-too-long-to-show-up/116141/10 "2017-12-21T22:56:19Z")

</div>

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

> [@300ms delay beta2](https://forum.ionicframework.com/t/300ms-delay-beta2/45610/8):
>
> 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)](https://forum.ionicframework.com/t/click-vs-tap/99094):
>
> 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…

---

<div class="post-metadata">

**Author:** ![jamesharvey](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jamesharvey/32/116080_2.png) [@jamesharvey](https://forum.ionicframework.com/u/jamesharvey)\
**Post date:** [December 22, 2017, 1:09am UTC](https://forum.ionicframework.com/t/modal-popover-take-too-long-to-show-up/116141/11 "2017-12-22T01:09:41Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:57pm UTC](https://forum.ionicframework.com/t/modal-popover-take-too-long-to-show-up/116141/12 "2021-07-19T21:57:53Z")

</div>