Ionic2 “ionViewDidEnter” method is very slow first time

Ionic Framework ionic-v3
1

Hi,

Can you tell me why below functionality has huge delay on first-time load? On 2nd time where it is normal.The same delay is on the actual device too.Please see the attached video.

Note : The issue here is firebase bind “this.eventData.getEventList().on(‘value’, snapshot => {}” When I remove it all are working fine.Do you know how to do it differently?

Video: Video about this issue

.html

<ion-card *ngFor="let event of eventList" (click)="goToEventDetail(event.id)" color="secondary">
    <ion-card-content>
      <p>Event Name: <strong>{{event?.name}}</strong></p>
      <p>Ticket: <strong>${{event?.price}}</strong></p>
      <p>Cost: <strong>${{event?.cost}}</strong></p>
      <p>Date: <strong>{{event?.date}}</strong></p>
    </ion-card-content>
</ion-card>

.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { EventDetailPage } from '../event-detail/event-detail';
import { EventData } from '../../providers/event-data';

@Component({
  selector: 'page-event-list',
  templateUrl: 'event-list.html',
})

export class EventListPage {
  public eventList: any;
  constructor(public navCtrl: NavController, public eventData: EventData) {

  }

  ionViewDidEnter() {
    this.eventData.getEventList().on('value', snapshot => {
      let rawList = [];
      snapshot.forEach(snap => {
        rawList.push({
          id: snap.key,
          name: snap.val().name,
          price: snap.val().price,
          cost: snap.val().cost,
          date: snap.val().date
        });
      });
      this.eventList = rawList;
    });
  }
}
2

I’ve had unexpected behavior when putting an Angular directive inside <ion-card>. First suggestion: wrap your card in a div, and use *ngFor inside the div.

Second, you don’t say what your EventData provider is doing. Maybe it takes a while to fetch the data, but once it has data in cache, it can render the page faster. So your provider is important.

Third, I think you should consider refactoring your code so you’re subscribing to an Observable in ngOnInit() instead of what you’re doing now. I’ve found that to be faster.

1 Like
3

Hi @AaronSterling,

Yes, You’re right.I have implemented this using AngularFire2 with Observables and no problem at all.Thanks :slight_smile: