CODEWITHSUNDEEP
ember.js
Dan
Dan

Reputation: 1596

Data loading indicator for when Ember.js objects are loading?

We're having trouble getting some form of visual indication that a 'page' is loading in our Ember App.

Tried both a gif method and also Spin JS. Both fail as they are very laggy and only fully load when all the Ember objects have loaded. A similar problem to this question.

What methods are other people using in their public facing builds?

Edit: This is when the app is loading for the first time. The initial load is long enough to require some form of visual indication.

Upvotes: 2

Views: 2332

Answers (2)

Willem de Wit
Willem de Wit

Reputation: 8742

You could add an overlay to your document with an loading indicator. When you add it via CSS it is loaded before Ember is initialized. After ember is initialized you could remove the overlay.

Below an example how I might implement it:

HTML:

<html>
  <head> ... load dependencies ... </head>
  <body class="loading"> ... handlebars templates ... </body>
</html>

CSS:

body.loading:after {
  content: '';
  background: rgba(255,255,255,.3) url(images/loader.gif) 50% no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}

Ember code:

App.ApplicationView = Ember.View.extend({
    removeLoader: function() {
        $('body').removeClass('loading');
    }.on('didInsertElement')
});

This way before Ember is initialized an loading indicator is showed, but when Ember is done initializing the loader is removed.

Upvotes: 3

ondrejbartas
ondrejbartas

Reputation: 117

You can use jQuery ajax callbacks for this:

$(document).ajaxStart(function(){ console.log("ajax started")})
$(document).ajaxStop(function(){ console.log("ajax stopped")})

This will work for all ajax requests.

Upvotes: 1

Related Questions