Load spinner while loading

Question

I want to load a spinner when my account page is loading, it is taking a bit time to load "myaccount" page so i want to load a spinner using spinner atmosphere package.

Here is my code,where do i need to add {> spinner} to load the spinner

this.route('myaccount', {path:'/myaccount/',
            fastRender: true
    });

for myaccount,it need to contact 3rd party api to load some data to page.

Suggest me which is the best place to load spinner

Answer 1

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('...');
    }
  });

Answer 2

Iron-router-progress is great!

https://github.com/Multiply/iron-router-progress

with this option, it's top

Router.configure progressDelay : 100