Question: Max size of items

[richardmward]

I've been building a LitElement variant of vscroll taking the https://stackblitz.com/edit/vscroll-vue-integration and https://stackblitz.com/edit/ngx-ui-scroll-chat-app-2 as inspiration for how to do so. Largely things are coming together, with the exception that I am having to wrap the adapter.clip() in a timeout (I assume because the way reactivity works in LitElement, it needs moving into the next render cycle or something).

That aside, one of the features I would like to do is to be able to have a maximum length of the items, but am unsure how to achieve it.

The use case is streaming data (starting with an empty list), and scrolling to the bottom (unless the user turns off auto scrolling). Because it is likely this view would be left running for some time, I'd like the backing item list to be limited in size - say never larger than 5000 items, so gradually as new items are appended on one end, they are removed from the other. I'm just struggling to work out what the most appropriate functions are to do this - and wonder if you can provide any pointers.

[dhilt]

@richardmward Thaks for using vscrol and for the issue! If I understand correctly, you want to limit the number of items currently present in the DOM. In that case, you need to use Adapter.clip along with stream update. Something like

  async addNewItems (items) {
    await this.datasource.adapter.relax();
    await this.datasource.adapter.append({ items, eof: true });
    await this.datasource.adapter.clip();
    this.viewportElement.scrollTop = this.viewportElement.scrollHeight;
  }

I admit that your case might be more complex, so it would be nice if you could take this demo and provide updates related to your case.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed within seven days if no further activity occurs. If it needs to remain open, add the "permanent" label.