Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Possible Scroll Speed Issue? #705

Open
RKennedy9064 opened this issue Jun 28, 2019 · 0 comments
Open

Possible Scroll Speed Issue? #705

RKennedy9064 opened this issue Jun 28, 2019 · 0 comments

Comments

@RKennedy9064
Copy link

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}}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant