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).

7 Likes
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 Likes
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

1 Like
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: Rendering a Template - Routing - Ember Guides

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) {......................