Hello,
Im creating an agenda using firebase and I have a list with > 3000 Contacts ({familyName, givenName, avatar}).
When I launch the app for the first time it takes a time until the list is fully loaded, then it runs normally.
View
<ion-content>
<ion-list [virtualScroll]="filteredItems" [virtualTrackBy]="trackByName" [approxItemHeight]="'60px'">
<ion-list-header>Follow us on Twitter</ion-list-header>
<ion-item tappable *virtualItem="let item" (click)="seeDetails(item)">
<ion-avatar item-start>
<ion-img [src]="item.avatar" [alt]="item.givenName"></ion-img>
</ion-avatar>
<h2>{{item.familyName}}</h2>
<p>{{item.givenName}}</p>
</ion-item>
</ion-list>
</ion-content>
TS
ionViewDidLoad() {
this.auth.auth.signInWithEmailAndPassword('uilham', '123456').then(user => {
this.db.list('localContacts/nozinho', ref => ref.orderByChild('givenName')).snapshotChanges().subscribe(contatos => {
this.filteredItems = contatos.map(item => item.payload.val());
});
}).catch(err => {
console.log(err);
});
}
trackByName = (index, item) => {
return item.givenName;
}
package.json
{
"name": "appzao",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"@angular/common": "5.0.3",
"@angular/compiler": "5.0.3",
"@angular/compiler-cli": "5.0.3",
"@angular/core": "5.0.3",
"@angular/forms": "5.0.3",
"@angular/http": "5.0.3",
"@angular/platform-browser": "5.0.3",
"@angular/platform-browser-dynamic": "5.0.3",
"@ionic-native/core": "4.4.0",
"@ionic-native/splash-screen": "4.4.0",
"@ionic-native/status-bar": "4.4.0",
"@ionic/storage": "^2.1.3",
"angularfire2": "^5.0.0-rc.6",
"cordova-android": "^6.2.3",
"cordova-plugin-device": "^2.0.1",
"cordova-plugin-ionic-keyboard": "^2.0.5",
"cordova-plugin-ionic-webview": "^1.1.16",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-whitelist": "^1.3.3",
"firebase": "^4.10.1",
"ionic-angular": "3.9.2",
"ionicons": "3.0.0",
"rxjs": "5.5.2",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.18"
},
"devDependencies": {
"@ionic/app-scripts": "3.1.8",
"typescript": "2.4.2"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-device": {},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-whitelist": {}
},
"platforms": [
"android"
]
}
}
Example