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...)
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();
}
}