How to wait for child data in meteor before showing content

Question

my page has a section that holds 10 games that the user owns. The games have achievements attached to them using a gameId. Currently, I am subscribing to the achievements of each game individually. This is done by using {{#each gamesList}} {{> oneGame}} {{/each}} and Template.oneGame.onCreated = function() { this.subscribe('gameAchievements', this.data.gameId); }. In this case gamesList is a helper that returns 10 subscribed game records. This works fine for getting the data and displaying it, but I am having trouble with creating a loading screen that will display until each child subscription (for achievements of each of the 10 games). How can I display a loading spinner on the parent template until all of its child subscriptions are done loading?

Answer 1

If you are using Iron Router, you can check out waitOn in the Iron Router Guide (http://iron-meteor.github.io/iron-router/).

Here's the code from that guide:

Router.route('/post/:_id', {
  // this template will be rendered until the subscriptions are ready
  loadingTemplate: 'loading',

  waitOn: function () {
    // return one handle, a function, or an array
    return Meteor.subscribe('post', this.params._id);
  },

  action: function () {
    this.render('myTemplate');
  }
});

Then in your 'loading' template, you can use the sacha:spin package (https://atmospherejs.com/sacha/spin) to display a spinner.

Answer 2

Might I suggest you circumvent this kind of complexity and delay by returning the gameAchievements along with the gameList cursor? Use reywood:publish-composite to run the dependent query at the same time as the parent. Then you can use @jbryant04's answer to handle the spinner while waiting for the gameList subscription to fulfill. You'll see fewer network roundtrips and your code will be much simpler.