Delay loading a template using Ember.js

Question

I am working on an application using Ember.js and Handlebars.js. I noticed that when loading a page, several delay patterns may appear at first. It makes sense that this happens because javascript needs to create HTML. When a page first loads, it looks like a loaded blank page, and then suddenly everything appears.

Honestly, this is a problem that I can live with, but still it seems a little uncomfortable to me. I can just overestimate things, but did someone else notice this, and does anyone have a recommendation on how to make page loading more natural?

Answer 1

As I noted above, you can show the counter while the page is rendering, loading data, etc. As an example, below is Mixin, which displays a counter until a view is displayed:

App.ShowSpinnerWhileRendering = Ember.Mixin.create({ layout: Ember.Handlebars.compile('<div class="loading">{{ yield }}</div>'), classNameBindings: ['isLoaded'], didInsertElement: function() { this.set('isLoaded', true); this._super(); } }); 

In case you want to wait for data to load (provided that you use a router to display views):

 App.ShowSpinnerWhileRendering = Ember.Mixin.create({ layout: Ember.Handlebars.compile('<div class="loading">{{ yield }}</div>'), classNameBindings: ['isLoaded'], isLoaded: function() { return this.get('isInserted') && this.get('controller.isLoaded'); }.property('isInserted', 'controller.isLoaded'), didInsertElement: function() { this.set('inserted', true); this._super(); } }); 

And mix it in your views:

 App.ApplicationView = Ember.View.extend(App.ShowSpinnerWhileRendering, { // ... }); 

Then define some CSS rules to show the loader (or something else) for an element that has a showSpinner class, and hide it when it also has an isLoaded class:

 .loading{ background-image: url("spinner.png") background-color: #DFDFDF } .is-loaded .loading { /* back to default styling, eg */ background-image: none background-color: white }