How to paginate in Meteor without flickering?

Question

In connection with this question here, is there an idiomatic way to implement pagination using Meteor, which does not show intermediate results in the client (which causes the page to jump).

I got the application from the example leaderboard, in fact, on the client that I use:

Template.scores.created = -> Meteor.autosubscribe -> Meteor.subscribe 'players', Session.get('page_size'), Session.get('current_page'), sortOrder() 

And server

 Meteor.publish 'players', (page_size, current_page, sort) -> Players.find({}, sort: sort, skip: (current_page-1)*page_size, limit: page_size) 

Due to the fact that the meteor subscribes to new data and then deletes the old data, all new elements are displayed shortly before deleting old elements, which leads to a flickering effect, which I would like to get rid of.

Answer 1

I managed to implement a workaround that is good enough at the moment. This is not very good, as it leads to a small amount of "flickering", but it is quite acceptable if the client and server are fast.

The solution was mainly for changing the template helper code:

 Template.scores.players = -> return Players.find({}, sort: sortOrder()) 

in

 Template.scores.players = -> return Players.find({}, sort: sortOrder()).fetch().slice(0,Session.get('page_size')) 

this limits the presentation of client elements to the maximum page size, therefore additional elements that arrive in the client before deleting old elements do not expand the total size of the list of viewed elements.

There is still some “flicker” that occurs when items arrive and disappear, however, since the size of the list does not change, it is not as bad as an implementation without a slice.