Polymer 1 and Firebase: How to deal with a large d

Question

So, I am using firebase-query to read a dataset of about 9000 items.

Then I am displaying the list of items with dom-repeat (with all sorts of filtering and sorting options).

It all worked well when I tested it with 10 items or so, but now that I am reading the full dataset I have no idea how to manage it... the entire 9000 items are displayed, which obviously is not quite manageable.

Here is a simplified version of what I have:

<firebase-query path="/organisations" data="{{organisations}}"></firebase-query>

<template is="dom-repeat" id="table" items="{{items}}" as="item" filter="filterList" sort="{{sortList(sortKey)}}" initial-count=20>
     [[item.name]]<br />
</template>

Where do I start in order to deal with a large amount of data? Some sort of pagination, or lazy-loading? If I understand correctly, the 9000 items are loaded from Firebase anyway, so it's a matter of displaying them in a way that doesn't kill the browser (which I've done - killing it...)

Answer 1

You may use iron-list as @Niklas suggested. And it is a good way. But if you are keen to use dom-repeat than here below example may help :

<iron-scroll-threshold on-lower-threshold="loadMoreData" lower-threshold="10" scroll-target="document" lower-triggered="{{nearBottom}}">
<template is="dom-repeat" items="{{items}}" sort='showLastItemOnTop' rendered-item-count="{{renItemCount}}">
     [[item.name]]<br />
</template>
</iron-scroll-threshold>

<template is="dom-if" if="[[nearBottom]]">
      <paper-progress indeterminate></paper-progress>
      <div>Loading...</div>
</template>
....
static get properties() { return { 
dataLimit:{
    type:Number,
    value:10
}    }}
....
_loadData() {
        var db = firebase.database();
        var dashRef = db.ref('organisations').limitToLast(this.dataLimit);
        dashRef.on('value', snap => { 
        if (snap.exists()) {
            this.set('items', Object.values(snap.val()));
        }

        });

}
loadMoreData(){
                this.dataLimit += 10;
                this._loadData();
        }
}

• Assuming you will add all dependencies used above. Live example is : https://www.jobijoy.com/wall