Page not updating

Ionic Framework ionic-v3
1

So I am populating a list view using data from Firebase using ionViewDidEnter() and for some reason it takes a very long time for the view/html to update. It can take around 25 - 30 secs which is far from ideal. By switching to a different tab and back to the original, the list instantly populates.

If it helps, I seem to get the same result when opening a different page (entry page) where the user enters data, and the range sliders do not update for a long time also. This happens when going to the page via LocalNotifications.on(), but not going to the page via a test button from the same class as LocalNotifications.on(). Both navigate to the entry page via navCtrl.push().

Does anyone know what is causing the issue or how to fix it?

I can edit to add code if it helps.

2

So I believe I have figured out what is causing the issue with the list view not appearing, but I don’t understand Ionic enough to know how to fix the issue.

My entryList seems to be empty the first time the page is viewed, however on returning to it, or turning the screen off and on again, it is populated.

overview.html:

<ion-content>

  <p padding *ngIf="entryList == null">No diary entries are available</p>

  <ion-list>

    <ion-item-group *ngFor="let day of days">
      <ion-item-divider light>{{ day.date }}</ion-item-divider>
      <ion-item *ngFor="let entry of day.entries" (click)="getItem(entry.id)">{{ entry.time }}</ion-item>
    </ion-item-group>
  </ion-list>

</ion-content>

overview.ts:

export class OverviewPage {
    public entryList: any;
    public days = [];

    constructor (public navCtrl: NavController, public viewCtrl: ViewController, public platform: Platform,
          public alertCtrl: AlertController, public entryData: EntryData) {
    }

    // Get the list of diary entries, and group them

    ionViewWillEnter() {
      console.log("Overview shown");
      this.entryData.getEntryList().on('value', snapshot => {
        let rawList = [];
        snapshot.forEach( snap => {
          rawList.push({
          id: snap.key,
          date: snap.val().date,
          time: moment(snap.val().time).format("HH:mm")
        });
        return false;
      });
      this.entryList = rawList;
      this.groupDays(this.entryList);
    });
  }

  // Group the list of entries by date, with the most recent date first

  groupDays(entries) {

    let sortedEntries = entries.slice(0);
    sortedEntries.sort((a,b) => {
      return a.date - b.date;
    });

    let currentDate = false;
    let currentDates = [];
    this.days = [];

    // For each entry, check if the ISO date is not the same as the current date being grouped, create a new group
    sortedEntries.forEach((value, index) => {
      if (value.date.substr(0, 9) != currentDate) {
        currentDate = value.date.substr(0, 9);
    
        // Create a new date for the days to be stored in
        let newDate = {
          date: moment(value.date).format("Do MMMM YYYY"),
          entries: []
        };
        
        // Add new date to the list of days
        currentDates = newDate.entries;
        this.days.push(newDate);
      }
      // The diary entry in the for loop is added to the current date
      currentDates.push(value);
    });
    this.days.reverse();
  }
}

This issue is affecting my range sliders on my entry page also.