Page slow due to loading of large ion-list

Ionic Framework ionic-v3
1

On a homepage I have a button that when you click it it navigates to a page with a list on it.

This list has over 1,000 items in it. Because of this the user clicks the button on the homepage and nothing happens for about 4 to 5 seconds. This makes you feel like the button is not working.

Can anybody suggest a workaround? How could I delay the loading of the list, until the page has opened. Perhaps even adding a spinner while it does.

Thanks.

2

Move the code that fetches/displays the list to ionViewDidEnter().
This method will fire when the user has entered the page.

3

Hi MattE, thanks as a newbie I’m not sure what you mean as the code,

<ion-list>
  <ion-item  tappable (click)="loadSound(item)" *ngFor="let item of items">{{item.name}}</ion-item>
</ion-list>

is in the html file of the page.

But,

ionViewDidEnter()

would be in the .ts file. How do I link the two?

Thanks

4

Can you show me the code where the content of item gets fetched?

5

This is frequencies.html

<ion-header>

  <ion-navbar>
    <ion-title>Frequencies</ion-title>

  </ion-navbar>
<ion-searchbar [(ngModel)]="searchTerm" (ionInput)="setFilteredItems()"></ion-searchbar>
</ion-header>


<ion-content padding>
<button ion-button full (click)="goBack()">Go Back</button>

  <ion-list>
  <ion-item  tappable (click)="loadSound(item)" *ngFor="let item of items">{{item.name}}</ion-item>
</ion-list>
</ion-content>

This is frequencies.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { NativePageTransitions, NativeTransitionOptions } from '@ionic-native/native-page-transitions';
import { HomePage } from '../home/home';
import { SoundsPage } from '../sounds/sounds';
import { DataProvider } from '../../providers/data/data';
/**
 * Generated class for the FrequenciesPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-frequencies',
  templateUrl: 'frequencies.html',
})
export class FrequenciesPage {
  searchTerm: string = '';
  items: any;
  constructor(public navCtrl: NavController, public navParams: NavParams, private nativePageTransitions: NativePageTransitions, public dataService: DataProvider) {

  }

  goBack(){
    if (this.navCtrl.canGoBack()) {
      this.navCtrl.pop();
    } else {
      this.nativePageTransitions.fade(null);
      //this.navCtrl.push(ItemDetailsPage);
      this.navCtrl.setRoot(HomePage);
    }
  }

  ionViewDidLoad() {
    this.setFilteredItems();
  }
  setFilteredItems() {
    this.items = this.dataService.filterItems(this.searchTerm);
  }

  loadSound(ailment){
    this.navCtrl.push(SoundsPage, ailment);
  }
}

the data is in an object in DataProvider in …/…/providers/data/data.

Thanks

6

Is it as simple as replacing ionViewDidLoad() with ionViewDidEnter()?

7

Yes, it’s that simple.
That will wait to fetch the data, until the user has entered the page.

8

Great. Thanks for your help!

9

1,000 is a big number, and I don’t think shuffling loading around is going to make much of a difference. I would look into using virtual scroll.

10

Thanks rapropos virtual scroll works much better. Thanks for the tip!