Ember pagination is not smooth at all (flashing)

@linkref wrote:

I’m actually using ember-simple-pagination. It’s works with a simple logic : -Empty the sore -Fetch data according to the actual page

The fact is that transition is not smooth at all, see by yourself : https://streamable.com/sg6sg

Is there a way to fix that ? My mind said to me that it would be a solution to fetch data first, empty the sort and then push data back to the store.

import Component from '@ember/component';
import { computed } from '@ember/object';
import { sort } from '@ember/object/computed';
import { inject as service } from '@ember/service';

export default Component.extend({
  store: service(),
  posts: computed(function() {
    return this.get('store').peekAll('post');
  }),

  pageSize: 20,
  pageNumber: null,
  recordCount: null,

  sortProps: ['createdAt:desc'],
  sortedPosts: sort('posts', 'sortProps'),

  loadPosts(getPageNumber) {
    const pageSize = this.get('pageSize');

    this.get('store').unloadAll('post');
    this.get('store').
      query('post', {page: {number: getPageNumber, size: pageSize}}).
      then((result) => {
        this.setProperties({
            'recordCount': result.get('meta.record-count'),
            'pageNumber': getPageNumber
        });
      };
  },

  init() {
    this._super(...arguments);
    this.loadPosts(1);
  },

  actions: {
    getPage(getPageNumber) {
      this.loadPosts(getPageNumber);
    }
  }
});

Posts: 1

Participants: 1

Read full topic