Angular Meteor pagination flicker

1

Hello,

I’m using angular-meteor to make simple pagination. unfortunately, I notice a flicker every time I change pages. This is not good UX and I want to fix it. I set chrome on network throttling to make the problem slow down and this is what I found:

Meteor sends changes to the collection one item at a time. So the list changes several times as each item is loaded and others are removed. Is there a way around this, to make the angular-meteor collection wait to reload until the full subscription change is complete?

thanks guys!

2

That’s not an angular issue as such, but it is how pub/sub works.

You could try https://atmospherejs.com/meteorhacks/fast-render

3

I know that it’s how pub sub works. I’m wondering if there is some sort of flag that meteor sends that says “update is complete”. If angular could wait for that, it would be nice and smooth with no flicker.

4

I think that I found the issue.

For some reason DDP fails every time, and it’s running everything over XHR. I think that’s the cause for the flicker.

5

What I would do (eventually on my app as well) is have the table be “non-reactive” on paging and be “reactive” once the new page is loaded.

Generally I would do the following steps

  1. Set paging flag to true
  2. Copy of the table data as is, then make the displayed set use that as the data.
  3. Stop the subscription using the .stop() method on the subscription handle.
  4. Resubscribe again and wait for autorun to pick up the changes

In autorun() I would have something like

    if (paging) {
        swap table data to the reactive data set
    }

Note that the swap should not switch it from one array to another, because that may trigger weirder things on ng-repeat but instead it should replace the entries in the array in-place. If the new data set is smaller, then reduce the size of the array before doing the swaps.

Mind you this is all hypothetical. I haven’t implemented it yet.