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
            }

        }

    }
});

Just returning a `ready()` function is not enough. There are several SO questions about this. [This answer](http://stackoverflow.com/a/29947115/2805154) seems to have one of the simpler approaches. You might also find [this tutorial](https://www.eventedmind.com/feed/using-wait-waiton-and-ready-in-routes/transcript) helpful. — Michel Floyd, Dec 02 '15 at 05:54

score 0 · Answer 1 · answered Dec 02 '15 at 00:58

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.

Did not work :( please check the console in http://ns1-timeout.meteor.com, you will see that is being called repeatedly and the templateLayout is not rendered after 3 seconds. The result I expect to see after 3 seconds is the templateLayout appLayout as per http://ns-timeout.meteor.com/ . Do you have any other suggestion? — natali, Dec 02 '15 at 01:12

score 0 · Answer 2 · answered Dec 03 '15 at 12:55

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;
   }
 }
};

Set timeout to layoutTemplate meteor / iron

2 Answers2