Set timeout to layoutTemplate meteor / iron

Question

I've been struggling to set 3 seconds timeout for my loadingTemplate.

Using the code bellow loadingTemplate is rendered but it does redirect to layoutTemplate after passing 3 seconds, as I expect.

Please find bellow my code and comments issues.

I also deployed this version to http://ns1-timeout.meteor.com/

I appreciate any help.

Router.configure({
    layoutTemplate: 'applayout',
    loadingTemplate: 'loading',
    waitOn: function () {

        var isTimePassed = false;
        var clock = 3;

        var timeLeft = function() {
            if (clock > 0) {
                clock--;
                Session.set("time", clock);
                console.log(clock);

            } else {
                console.log("That's All Folks");
                //return true
                isTimePassed = true;
                Meteor.clearInterval(interval);
                console.log('is Time passed: '+ isTimePassed);
                return isTimePassed; // seems it is being ignored

            }
        };

        var interval = Meteor.setInterval(timeLeft, 1000);

        return {
            ready: function () {
                console.log('return ready: ' + isTimePassed);
                return isTimePassed; // keeps the loading page and does not redirect to applayout if changed to false, loadingTemplate is not loaded and
            }

        }

    }
});

Answer 1

After a few hours working on this I figured out that the best way to set a custom timeout for a loading template was not using Router.configure. The correct way would be setting a call to onBeforeAction function to my / route. So the code has ended as the following:

Router.configure({
layoutTemplate: 'appLayout',
loadingTemplate: 'loading'
});

Router.onBeforeAction(function(){
   if(!Session.get('templateLoaded'))
   {
    setTimeOut(1000);
    this.layout('loading');
    this.render('loading');
   }
  else
  {
    this.render('home');
    this.next();
  }
}, 
{
   only: ['home']

});

var setTimeOut = function (timeout) {
var self = this;
self._ready = false
self._dep = new Tracker.Dependency();

Meteor.setTimeout(function () {
    self._ready = true;
    self._dep.changed();
    if(Meteor.isClient){
        Session.set('templateLoaded', true); // set session variable to true so applayout Template will be rendered
    }

}, timeout);

  return function () {
    self._dep.depend();
    return function () {
        return self._ready;
   }
 }
};

Answer 2

Returning from a setInterval won't do anything. You need to use a reactive variable and have ready return the value of that reactive variable:

Router.configure({
    layoutTemplate: 'applayout',
    loadingTemplate: 'loading',
    waitOn: function () {
        Session.set('isTimePassed', false);
        var isTimePassed = false;
        var clock = 3;

        var timeLeft = function() {
            if (clock > 0) {
                clock--;
                Session.set("time", clock);
                console.log(clock);

            } else {
                console.log("That's All Folks");
                //return true
                isTimePassed = true;
                Meteor.clearInterval(interval);
                console.log('is Time passed: '+ isTimePassed);
                Session.set('isTimePassed', true);

            }
        };

        var interval = Meteor.setInterval(timeLeft, 1000);

        return {
            ready: function () {
                return Session.get('isTimePassed');
            }

        }

    }
});

However, it is not exactly clear in your question if this is what you are intending to do.