0

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

ReyAnthonyRenacia
  • 17,219
  • 5
  • 37
  • 56
Hubert
  • 369
  • 3
  • 21
  • If you want to lazy load data, you have to use raw javascript to load data from firebase instead of using the firebase-query element. – dshukertjr Mar 07 '18 at 06:08
  • Wouldn't be the iron-list element useful in this case. https://www.webcomponents.org/element/PolymerElements/iron-list – Niklas Mar 07 '18 at 07:59

1 Answers1

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();
        }
}
Cappittall
  • 3,300
  • 3
  • 15
  • 23
  • Thank you, HakanC, that's super helpful! I've made a few tests and it seems to work well. I'm now trying to figure out how to work the dom-repeat filters and sorting alongside this lazy-loading, but that's a separate subject, I guess. – Hubert Mar 07 '18 at 22:45