Wait for page data in iron router - Meteor

Question

Is it possible to wait until the page data is loaded before page rendering? I always see the notFound template for a few milliseconds before the data is loaded.

Here is my code:

this.route('gamePage', {
        path: '/game/:slug/',
        onBeforeAction: filter,
        waitOn: function() { return [Meteor.subscribe('game', this.params.slug)]; },
        data: function() {
            var game =  Games.findOne({slug: this.params.slug});
            if (!game) {
                this.render("notFound");
            } else {
              return game;
            }
        }
    });

Any help would be greatly appreciated.

Answer 1

You can use the 'loading' hook to display a template of your choice while the subscriptions in waitOn are not yet ready.

Activate the hook:

Router.onBeforeAction("loading");

And set a loading template:

Router.configure({
  loadingTemplate: "loading"
});

<template name="loading">
  loading... <!-- or display an animated spinner -->
</template>

You can also set the loading template on a per-route level.

this.route("blah", {
  path: "/blah",
  loadingTemplate: "blahLoading"
});

Answer 2

Here is how I solved it:

if (!game && this.ready()) {
       this.render("notFound");
 } else {
       return game;
 }