Flickering effect when using Meteor's SmartCollection

Question

The results of a query on a SmartCollection Fruits are rendered in a Meteor template. A Python script continuously insert documents in the fruit collection.

collections/fruits.js

Fruits = new Meteor.SmartCollection('fruits');

server/publications.js

Meteor.publish('fruits', function(userId) {
    return Fruits.find({}, {sort:{timestamp: -1}, limit: 30+1});
});

client/main.html

<template name="fruits">
    {{#each fruit}}
        {{name}} {{price}}
    {{/each}}
</template>

client/main.js

Template.fruits.fruit = function() {
    return Fruits.find({}, {sort:{price: -1}})
}

Question: The output of Template.fruits appears to flicker very often, presumably when the local copy of the collection is being updated. How can we avoid the flicker?

Using Meteor v6.6.3 and smart-collection v0.3.23

Inserting documents using Python

for date, row in fruits.T.iterkv():

    docExist = db.fruits.find({'timestamp': row['timestamp']})
    if docExist.count() == 0:
        db.fruits.insert(data)

How does the insert, remove and update code look like? And how many fruits do we have on this one? — Joseph, Nov 30 '13 at 09:27
@JosephtheDreamer Updated the original post with the Python code. Sorry I meant only inserting docs into mongodb, no updates and removal. — Athena Wisdom, Nov 30 '13 at 09:33
How large is your fruit collection? You might need to limit the amount of results you return in your `fruit()` helper for now. All of the HTML in your template is completely re-rendered every time a fruit is added. When Meteor UI lands it should fix this because it doesn't re-render the entire template, only the parts that have changed. — sbking, Nov 30 '13 at 20:19
You might be able to get rid of the flicker by separating `{{name}} {{price}}` into its own individual template. — sbking, Nov 30 '13 at 20:20

score 1 · Answer 1 · answered Dec 11 '13 at 16:29

I was having the same issue. I tried {{#isolate}} however that was ineffective. Instead I used {{#constant}} right after my {{each}}. The code looked like this and worked very well:

{{#each file}}
  {{#constant}}
    {{filename}}
  {{/constant}}    
{{/each file}}

score 0 · Answer 2 · answered Dec 01 '13 at 06:50

The flickering occurs due to Meteor patching out the DOM when the data changes. Meteor UI should fix this problem when its out but still a while to go..

You could use {{#isolate}} to separate each block so that only the block that has changed has patched out.

{{#isolate}}
  {{name}} {{price}}
{{/isolate}}

This won't help much though if you have added a new fruit which has a price between two other fruits you already have. The new fruit will have to have the entire list re-rendered because it would have to insert the new fruit mid way.

Also you shouldn't notice the flicker unless you have some kind of image or something I'm assuming you've left some code out but try putting the images in the {{#isolate}}. I'm not sure it will work but it could.

Flickering effect when using Meteor's SmartCollection

2 Answers2