How to defer rendering LoadRoute / LoadingTemplate in Emberjs 1.0

Question

With the loadRoute function, we have a good way to display loading indicators in Ember.js applications. But what if you have a very short boot time? Page transitions will be too noisy with blinking loading indicators. Therefore, I think that it is better to defer the actual rendering of the loaded layer until a certain threshold is exceeded. There are many ways to do this, but what's the best part?

Answer 1

I found a solution:

App.LoadingRoute = Em.Route.extend({ deactivate: function() { var timer = this.get('timer'); if (timer) Em.run.cancel(timer); }, renderTemplate: function(controller, model) { var self = this; // Only render the loading indicator after 0.5s var timer = Em.run.later(this, function() { self.render('loading') }, 500); this.set('timer', timer); } }); 

Cancels rendering if promises are eliminated before the threshold value is exceeded.

Answer 2

One good way I can think of to delay LoadingRoute would be to delay the rendering of the template using Ember.run.later , which works like setTimeout but is much safer by running inside runloop.

 App.LoadingRoute = Ember.Route.extend({ renderTemplate: function() { Ember.run.later(this, function() { this.render(); }, 1000); // put here the treshold you might find appropriate in ms } }); 

If the model tag resolves a promise before the timeout expires, then LoadingRoute will not be displayed at all, this is the behavior you might want.

Hope this helps.