Loading A Large Collection In A Meteor App

In a Meteor app, a large collection containing 1000 records is published to the client. However users loading the {{loginButtons} will experience a 3-5 second lag as it fully rende

Solution 1:

You can use iron-router's waiton on specific routes and loadingTemplate properties to show the user a progress indicator while the subscription gets ready. As seen on https://github.com/EventedMind/iron-router#waiting-on-subscriptions-waiton

Router.configure({
  layoutTemplate: 'layout',
  notFoundTemplate: 'notFound',
  loadingTemplate: 'loading'
});

Router.map(function () {
  this.route('postShow', {
    path: '/posts/:_id',

    waitOn: function () {
      returnMeteor.subscribe('posts');
    }
  });
});

Also, https://atmosphere.meteor.com/package/fast-render is a third party package which integates into iron-router and sends down the initial data along with the template therefore making the page appear loaded with data instantly.

There is a good tutorial about this at http://meteorhacks.com/integrating-iron-router-based-apps-with-fast-render.html

Solution 2:

I see two other packages that could help you :

Paginated subscription :https://atmosphere.meteor.com/package/paginated-subscription The idea here would be to set a small limit for the initial load, and when the rest is loaded, change the limit to load the rest

Lazy subscription :https://atmosphere.meteor.com/package/lazy-subscription The idea here is not to subscribe at all to your large collection in the first time ; only init it like that :

Post = new Meteor.Lazy('post', function() { Meteor.subscribe('posts'); });

(it does not subscribe to anything)

And then when ready : Template.some_template.get_posts = function() { return Post().find({}); //Note that Post is now a function. }; => it doe subscribe

The second solution may seem more straight forward, but you can manage it way better with the first one.