Show loading indicator on partial template - meteor

Question

I have the following template
<template name="myTabs">
<div class="my-tabs">
<div class="page-header">
<h1>My Tabs</h1>
</div>
<form class="navbar-form navbar-left" role="search">
New
<div class="form-group">
<input type="text"
name="tab"
class="form-control typeahead"
autocomplete="off" spellcheck="off"
data-source="tabs"
data-template="tabSearch"
placeholder="Filter"/>
</div>
</form>
{{>tabsTable}}
</div>
</template>
And the following nested template
<template name='tabsTable'>
<table class="table table-hover">
... table that displays data from collection
</table>
</template>
And the following route
this.route('myTabs', {
path: '/mytabs',
layoutTemplate: 'dashboardLayout',
loginRequired: 'entrySignIn',
waitOn: function() {
return this.subscribe("mytabs", Meteor.userId());
},
data: {
tabs: Tabs.find({})
},
onAfterAction: function() {
SEO.set({
title: 'My Tabs | ' + SEO.settings.title
});
}
});
Problem is that when i visit the myTabs route, the whole template is replaced by the loading template, instead of just the part that depends on the collection being loaded, namely the tabsTable template.
How can I make it so that the loading template is only displayed on the nested template, so that all the html that doesnt depend on the collection being loaded is still shown (title, wrapping html etc..)?

Answer 1

Instead of using waitOn with a loadingTemplate in the router, you can use subscriptions which will give you a ready calllback which you can use to hide the loading template in your view.
Router.route('myTabs', {
path: '/mytabs',
layoutTemplate: 'dashboardLayout',
loginRequired: 'entrySignIn',
subscriptions: function() {
this.subs = Meteor.subscribe("mytabs", Meteor.userId());
},
data: function() {
return {
tabs: Tabs.find(),
ready: this.subs.ready
};
},
onAfterAction: function() {
SEO.set({
title: 'My Tabs | ' + SEO.settings.title
});
}
});
Then in your view
<template name="myTabs">
<div class="my-tabs">
<!-- ... -->
{{#unless ready}}
{{> loadingTemplate}}
{{else}}
{{> tabsTable}}
{{/unless}}
</div>
</template>