Meteor 1.0: Show loading screen on button click with iron:router

Question

I have a button. When this button is clicked, I would like to display the loading template (using sacha:spin) for 5 seconds.

  'click #submit-air': (e,t) ->
    e.preventDefault()
    ...

I'm using iron:router, and from what I've read in the docs, it seems like the answer lies somewhere in hooks, but I can't figure it out. What is the best way to display the loading template for a set number of seconds while staying in the same route? Is that possible?

Answer 1

I wouldn't use iron router at all. Try something like this:

Session.setDefault('loading', false);

Template.something.helpers({
  loading: function() { return Session.get('loading');}
});
Template.something.events({
  'click button': function(e,t) {
    Session.set('loading', true);
    Meteor.setTimeout(function(){
      Session.set('loading', false);
      // anything else you want to do. Maybe Router.go('somewhere else')
    }, 5000); // wait 5 seconds
});

Now in your template:

{{#if loading}}{{>spinner}}{{else}}
  <-- your template with a button--!>
{{/if}}