If you use NProgress preloader then you can achieve it like that:
this.route('myaccount', {
path:'/myaccount/',
action:function(){
self = this;
self.render('header', {to:'header'});
NProgress.start();
// load external data and onComplete (callback) it renders template and stops preloader
MyAccount.loadData(function(){
self.render(self.template);
NProgress.done();
})
}
});
Update :
Standard solution for using Spinner with Meteor subscription mechanism is using waitOn function:
<template name="loadingTemplate">
{{>spinner}}
</template>
<template name="layout">
<nav>
{{> yield region='header'}}
</nav>
{{> yield}}
<footer>
{{> yield region='footer'}}
</footer>
</template>
Router.configure({
loadingTemplate: 'loadingTemplate',
layoutTemplate: 'layoutTemplate',
yieldTemplates: {
'header': { to: 'header' },
'footer': { to: 'footer' }
}
});
//
this.route('myaccount', {
path: '/myaccount',
template:'myaccountTemplate',
layoutTemplate: 'layoutTemplate',
data: function() {
...
},
waitOn: function () {
return Meteor.subscribe('...');
}
});