ember-light-table icon indicating copy to clipboard operation
ember-light-table copied to clipboard

Possible Scroll Speed Issue?

Open RKennedy9064 opened this issue 5 years ago • 0 comments

I've been working on adding ember-light-table to my current project and the QA on my team noticed something weird. It seems like it happens sporadically and is hard to reproduce, but we've noticed that depending on how fast you scroll, it increments the page and starts a new request, but never loads the previous requests records. This ends up leaving the table in a state where it thinks it's reached the end, but it's missing records. The weird part is if I try to reproduce this, it doesn't always happen. sometimes the request skips records and other times it doesn't.

This is the code I have based off the examples for my table. The only code I've really changes is moving the query params to a computed property. Has anyone else encountered anything like this before? Am I using the task to fetch records correctly? Any help would be greatly appreciated.

queryParams: computed('include', 'number', 'size', 'sort', 'filter', function() {
    let params = {};
    let { include, sort, filter, number, size} = this.getProperties('include', 'sort', 'filter', 'number', 
'size');

  if (include) {
    assign(params, { include: include });
  }

  if (sort) {
    assign(params, { sort: sort });
  }

  if (filter) {
    assign(params, { filter: filter });
  }

  if (number && size) {
    assign(params, { page: { number: number, size: size } });
  }

  return params;
}),

fetchRecords: task(function*() {
    let records = yield this.get('store').query(this.get('modelName'), this.get('queryParams'));
    this.get('model').pushObjects(records.toArray());
    this.set('meta', records.get('meta'));
    this.set('canLoadMore', !isEmpty(records));
  }).restartable(),

  actions: {
    onScrolledToBottom() {
      if (this.get('canLoadMore')) {
        this.incrementProperty('number');
        this.get('fetchRecords').perform();
      }
    },
}

{{#light-table table 
  height="65vh" 
  as |t|
}}

  {{t.head
    onColumnClick=(action "onColumnClick")
    iconSortable="fa fa-sort"
    iconAscending="fa fa-sort-asc"
    iconDescending="fa fa-sort-desc"
    fixed=true
  }}

  {{#t.body
    autoHideScrollbar=false
    canSelect=false
    canExpand=false
    onScrolledToBottom=(action "onScrolledToBottom")
    as |body|
  }}
    {{#if isLoading}}
      {{#body.loader}}
        {{table-loader}}
      {{/body.loader}}
    {{/if}}
  {{/t.body}}

  {{#if meta}}
    {{#t.foot fixed=true as |columns|}}
      <tr>
        <td class="align-center" colspan={{columns.length}}>
          Displaying {{model.length}} out of {{meta.total-records}} records
        </td>
      </tr>
    {{/t.foot}}
  {{/if}}

{{/light-table}}

RKennedy9064 avatar Jun 28 '19 16:06 RKennedy9064