Found a fun hidden loading feature


#1

While in the midst of implementing a loading route for use while awaiting certain ajax calls a fun easter egg fell in my lap.

Just by creating a loading_route.js, which contains

App.LoadingRoute = Ember.Route.extend({});

and a loading.hbs (my loading template), which contains, just some boring css with a spinner

<div class="loading_content_wrapper"></div>

Ember has this fun loading state (enterLoadingState) where while it’s loading the models and setting up the controllers for the first time (I think it’s just the first time, I haven’t witnessed it anywhere else) it will go to the loading route and hang out there. That way the user can watch a fun spinning circle instead of a white page. Cool stuff! Thanks Tom/Yehuda/whoever put that code in there (I’m too lazy to check the history).


#2

Yes, it was introduced just before the recent Router update see: https://gist.github.com/machty/5647589

and this example: http://jsbin.com/axarop/47/edit


#3

guys, is this feature in ember rc6 ?


#4

nvm, Is just that I wasn’t seeing the message, it was appearing too fast


#5

Yeah, it’s a pretty cool feature. We need to document it better. Anyone want to write a PR?


#6

This has been around long before the recent RC6 router stuff… I guess it’s just relatively undocumented?

High fives for anyone who wants to put in a docs PR


#7

Took a shot - https://github.com/emberjs/website/pull/604


#8

@fanta Sometimes Ember is too fast… :wink: First world problem right there.


#9

And how can you style/position the loading indicator properly? As soon as I used position: fixed or anything like that to put it into the center, the loading indicator does not disappear anymore.


#10

Our loader is z-indexed pretty low, I’ll have to look to see if it’s still there just behind the main content.


#11

This will be in the docs after my commit goes through, but you can override the renderTemplate method of the LoadingRoute to render it into a specific outlet.


#12

Is there any way to control where the loading view gets rendered?

PD: NVM I should learn to read first: http://emberjs.com/guides/routing/rendering-a-template/


#13

For me the LoadingRoute does not work when loading data from the server.

App.BatchsAllRoute = Ember.Route.extend({
        model: function(){
            return App.Request.find();
        }
});

In the above App.Request is a DS.Model

However, the loading template never shows while the ajax request is going on. Has anyone tried the loadingroute when loading data from the server?


#14

Yes, are you sure your loading route is working at all? It definitely works while waiting for the ajax request.


#15

I tried several times but it didn’t work. Here is gist of my app.js and the template. in the JS if I uncomment the commented part then it works. Maybe I’m missing something I’m not aware of. https://gist.github.com/Omnipresent/6302024


#16

I’m not seeing anything when I click that gist.


#17

I was using App.Model.find() which apparently does not return a promise, unless I’m wrong.


#18

That depends on your adapter :slight_smile: Are you using the rest adapter from Ember Model or Ember Data?


#19

I am using Model.

App.Store = DS.Store.extend({
    adapter: DS.RESTAdapter.extend({
        url: '/myapp'
    })
});

App.Requests = DS.Model.extend({
    date: DS.attr("string"),
    something: DS.attr("string"),
});

#20

That’s actually Ember Data, and it does return a promise, see below

 find: function(store, type, id) {
    var root = this.rootForType(type), adapter = this;

  return this.ajax(this.buildURL(root, id), "GET").
    then(function(json){
      adapter.didFindRecord(store, type, json, id);
   }).then(null, DS.rejectionHandler);
  },

  ajax: function(url, type, hash) {
    var adapter = this;

    return new Ember.RSVP.Promise(function(resolve, reject) {......................