Meteor infinite scroll : prevent subscribe to rerender elements

Question

I'm implementing an infinite scroll on Meteor in order to display a grid of pictures linked to a large collection.

When the user is at the end of the page I subscribe to more elements and I increase the number of pictures displayed (through my template.helper).

//SERVER
Meteor.publish('generalMusics', function(limit){
   return Musics.find({}, {limit: limit});
});

//CLIENT: when the template is created and when the limit of data increases 
//it subscribes again
Template.t_elementSubHeader.onCreated( function() {
    Session.set('reqLimit',50);
    var self = this;
    //Everytime reqLimit changes I redo the subscribe
    this.autorun(function(){
        self.subscribe('generalMusics', Session.get('reqLimit'));
});

//CLIENT: more elements are sent to the template when reqLimit increases
Template.t_elementSubHeader.helpers({
    data: function() {
        return Musics.find({}, {limit : Session.get('reqLimit')});
    }
});

//Also on client, when the user reach the bottom of the page
Session.set('reqLimit',Session.get('reqLimit')+50);

It works well but all the template elements are re-rendering and it also takes some time to do so. It's very inconvenient for the user, I think it takes time because I'm displaying pictures and not text (we already compress the pictures to a minimum size).

The problem is due to the subscribe that rerender all the template elements.

How can I do to just add the new elements and prevent the re-rendering of the already displayed elements when I subscribe ?

My app will be on mobile devices so I can't subscribe to a lot of elements and then just increase the limit in the template helper.

Some code will really help in diagnosing the problem – Ankit Aug 27 '16 at 16:44 — Ankit, Aug 27 '16 at 16:44

score 0 · Answer 1 · answered Sep 07 '16 at 19:27

Finally I got it, i've added some code in the html to wait the subscription to be ready and I forgot about it.

I removed:

{{#if Template.subscriptionsReady}}
        {{> Template.dynamic template="t_elementList" data=tabData}}
{{/if}}

Infinite scroll is working like a charm.

Meteor infinite scroll : prevent subscribe to rerender elements

1 Answers1