Page slow due to loading of large ion-list

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.


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

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

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

is in the html file of the page.



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


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

This is frequencies.html



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

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

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

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 for more info on
 * Ionic pages and navigation.

  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) {


    if (this.navCtrl.canGoBack()) {
    } else {

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

    this.navCtrl.push(SoundsPage, ailment);

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


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

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

Great. Thanks for your help!

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.

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