Cache

If the source of data is remote, it might be very important to implement an intermediate Cache layer between Scroller's Datasource and Remote Data. Something like Angular HTTP Caching Interceptor for http calls, but more list-items specific, that could be easily integrated with the Datasource.get implementation.

One of the possible approach is as follows.

cache = new Map();

datasource = new Datasource({
  get: (index, count, success) => {
    const result = [], _index = null;
    for (let i = index; i < index + count; i++) {
      const item = this.cache.get(i);
      if (item) {
        result.push(item);
      } else {
        _index = i;
        break;
      }
    }
    if (_index === null) {
      // all requested data was taken from cached
      success(result);
      return;
    }
    // request missing data from remote
    const _count = index + count - _index;
    this.remoteDataService.request(_index, _count).then(_result => {
      // cache received data
      _result.forEach((item, index) => this.cache.set(_index + index, item));
      // merge restored and requested data
      success([...result, ..._result]);
    });
  }
});