Virtual Scroll + Firebase = Slow rendering on scroll

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.

I noticed that if I increase the bufferRatio it will runs normally until the end of the buffer, then it takes the same time to, idk, maybe create the other elements, then works like a charm.

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
Exemplo

Running on iPhone 5

That’s a weakness of Firebase, and why Firestore is an improvement. Not much benefit to using virtual scroll if you have to request all the items in your list as a chunk.

So using a firestone is a better solution?
Gonna give it a shot.

Nope.
Same result here

hey ya!

you can limit the query in firebase and in the event of scroll you can sum as many items as you need
ex:

limit: number = 10

constructor(){
//Query…

}
onInfiniteScroll()
{
this.limit += 10
//Query…
}

you can try https://stackoverflow.com/a/47365502