CODEWITHSUNDEEP
javascriptmeteor
Taylor Gautier
Taylor Gautier

Reputation: 4944

How to do pagination in Meteor without flicker?

Related to this question here, is there an idiomatic way of implementing pagination using Meteor that doesn't show intermediate results in the client (which causes the page to jump around).

I've derived an app from the leaderboard example, in essence, on the client I am using this:

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

And the 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 way that meteor subscribes to new data and then removes old data, all the new items show briefly before the old items are removed which leads to a flickering effect that I'd like to get rid of.

Upvotes: 6

Views: 1643

Answers (1)

Taylor Gautier
Taylor Gautier

Reputation: 4944

I was able to implement a workaround that's good enough for now. It's not great as it does lead to some small amount of "flickering" but it's reasonably tolerable assuming the client and server are running fast.

The solution was mainly to change the Template helper code from:

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

to:

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

this limits the client view of items to a maximum of the page size, so that additional items that arrive in the client before old items are removed don't expand the overall size of the list of items being viewed.

There is still some "flicker" that results as items arrive and disappear however since the size of the list doesn't change it's not as bad as the implementation without the slice.

Upvotes: 3

Related Questions