Click Delay on Ionic 3


#1

@ionic/app-scripts : 3.1.8
Cordova Platforms : none
Ionic Framework : ionic-angular 3.9.2

When testing in the browser, the clicks are incredibly fast and responsive. For example:

<ion-item>
        <ion-label>Only Show Upcoming Games</ion-label>
        <ion-toggle [(ngModel)]="ugames"></ion-toggle>
</ion-item>    

Clicking on that in browser (during serve) is instantaneous.

However, when testing on IOS using IonicDevApp, a click on the toggle takes 1 second. Same with buttons, searches, etc.

Things I have tried:
Adding tappable to buttons/elements (no affect)
Adding loadingCtrl spinners (they only appear after the 1 sec delay)
Making sure all components are updated
Running serve with --prod

I have scoured the forums and stack overflow, and everyone talks about it (or that it was ‘fixed’ in 3.01) but I am not seeing it.

Any advice would be greatly appreciated, cause right now, this app feels very un-responsive.


#2

Are you comfortable sharing the template of a page? You might be using too much change detection.


#3

HI Arron,

Thanks for the reply. I’m happy to share the template (see below), but this is happening across all pages. Clicks work fine/fast in browser. But seem to add a 1 second delay in the IonDevApp on a device.

<ion-header>
  <ion-navbar class="primary">
    <ion-title>Schedule</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding="true" class="has-header">
      <ion-item>
        <ion-label>Only Show Upcoming Games</ion-label>
        <ion-toggle tappable [(ngModel)]="ugames"></ion-toggle>
      </ion-item>    
      <ion-item>
        <ion-label>Only Show Home Games</ion-label>
        <ion-toggle tappable [(ngModel)]="showhomegamesonly"></ion-toggle>
      </ion-item>
      <ion-item>
      <ion-searchbar [(ngModel)]="terms" placeholder="School, Venue, or Sport"></ion-searchbar>
      </ion-item>
      <ion-list *ngFor="let event of games | search : terms">
          <ion-item  class="gamecontainer" *ngIf="checkgame(event.Past,event.Away)">
          <p class="sporttype">{{event.SportType}}
         <span class="sporticon {{event.SportType}}"></span>
         </p>
        <p>{{event.GameDate}} at {{event.Gametime}}</p>
        <p class="teams">{{event.Teams}}</p>
        <p class="venue">{{event.Venue}}, {{event.VenCity}}</p>
        <button tappable ion-button icon-start default *ngIf="checkass(event.LockDate,event.LockDate2,event.LockDate3)" (click)="gotogame(event.EventNo)"><ion-icon name="information-circle"></ion-icon> Game Roster</button>       
   </ion-item>
   </ion-list>
   <div id="schedule-markdown5" class="show-list-numbers-and-dots">
      <p style="color:#000000;">There are no more upcoming games to display. You can toggle the button up top to show all games for the season. </p>
    </div>
  </ion-content>

#4

Your ngIfs are bad. You’ve got maybe dozens of function calls being called every iteration. Put a console.log in checkass and checkgame and you’ll see what I mean. I recommend you filter your set of games in your ts file, so it only contains visible games, and then display that already-filtered array in your template.


#5

Thanks Arron, but that is just on one page. My other pages don’t even have *ngif directives. I also tested it without any of the function calls, and still have the click delay.

It is happening on every click. Ie, the button that calls gotogame(event.EventNo) creates a 1 second delay before it even fires, and that function is simply:

  gotogame(eventno){
    this.navCtrl.push('GameinformationPage', {data: eventno});
  }

So, it shouldn’t be delaying.

Also, as I mentioned before, it is 100% fast and fine in browser.

I should also point out, that the delay is happening BEFORE any of the calls fire. So, clicking toggle, (1 sec delay), then the filter happens.

Or, entering information, pressing log in button, 1 sec delay, then the code fires.


#6

If that page is on the nav stack, the ngIfs keep on being checked. You have to keep in mind everything on the stack, not just what is in front of the user right now.


#7

Again, appreciate the help. But this is not the issue. Even removing all the ng-if directives (and re-serving) had no effect.

Every click has a delay, regardless of the page, or even simple commands. Ie, clicking into the search bar takes a second before the keyboard pops up. Clicking the log-in button takes a second before it fires, etc, etc.

Adjusted template (had no affect):

<ion-header>

  <ion-navbar class="primary">
    <ion-title>Schedule</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding="true" class="has-header">
      <ion-item>
        <ion-label>Only Show Upcoming Games</ion-label>
        <ion-toggle tappable [(ngModel)]="ugames"></ion-toggle>
      </ion-item>    
      <ion-item>
        <ion-label>Only Show Home Games</ion-label>
        <ion-toggle tappable [(ngModel)]="showhomegamesonly"></ion-toggle>
      </ion-item>
      <ion-item>
        <ion-searchbar [(ngModel)]="terms" placeholder="School, Venue, or Sport"></ion-searchbar>
      </ion-item>
       
      <ion-list *ngFor="let event of games | search : terms">
          <ion-item  class="gamecontainer">
        <p class="sporttype">{{event.SportType}}
         <span class="sporticon {{event.SportType}}"></span>
        </p>
        <p>{{event.GameDate}} at {{event.Gametime}}</p>
        <p class="teams">{{event.Teams}}</p>
        <p class="venue">{{event.Venue}}, {{event.VenCity}}</p>
        <button tappable ion-button icon-start default (click)="gotogame(event.EventNo)"><ion-icon name="information-circle"></ion-icon> Game Roster</button>
       
   </ion-item>
   </ion-list>
   <div id="schedule-markdown5" class="show-list-numbers-and-dots">
      <p style="color:#000000;">There are no more upcoming games to display. You can toggle the button up top to show all games for the season. </p>
    </div>
  </ion-content>

#8

What is the search pipe? Angular removed their sort pipe because it was causing slowdown.


#9

It’s not the search pipe. This is happening across all pages. It’s happens from the first page load which is simply a user login – clicking the button for the log in creates/has a 1 to 2 sec delay.

Only when viewing on a device.

So before pipes are called, or ngifs, etc this problem exists. Any clickable action is causing a delay.


#10

Are you eagerly loading or lazily loading? if you’re eagerly loading, you’re loading all the pages at once.


#11

Hi Aaron,

I am Lazy Loading pages.


#12

If you don’t mind me joining the discussion.

Firstly I am not sure if you are saying the click action itself is slow - or is the code called by the click slow?

The app I am using seem fine on all the devices I have tested on - but when someone else used it on their device the click action seem to take some time.
My assumption is that it is slower because of the device processor speed and memory.

I would suggest creating a blank Ionic app and see how that works - if the click is slow then it is device or devapp. If the click is OK it is your design which is the issue.

Another solution is to build the app and don’t use IonicDevApp and see what the real speed is on the device.


#13

Thank you both for your help. It is very much appreciated.

The problem appeared to be that I was simply pulling in too many ‘items’ from my Rest Call.

As part of troubleshooting, I adjusted the call to only pull in ‘10’, and suddenly all my my clicks/toggles were working.

So, I added [virtualScroll] to the ion-list element, and that seemed to do the trick.

Again, I really, really appreciate the help.