Ember loading template works only on page refresh

Question

I have in my Ember app this routes:

Router.map(function() {
    // landing page (login/register)
    this.route('home', {path: '/'});

    // authenticated pages
    this.route('webappFrame', {path: '/app'}, function() {
        this.route('feed', {path: 'feed'});
        this.route('photoDetail', {path: 'photo/detail/:id'});
    });
});

where both "feed" and "photoDetail" have a model hook that return a promise (records coming from the server); I have a loading.hbs template in the /template folder;

After a page refresh on both "feed" and "photoDetail" routes, the loading template is correctly displayed; but when navigating between the routes, it is not shown again (the outlet remains white untile the promise is resolved);

I use ember-cli 2.3.0-beta.1 (but also tried 1.13.14 stable) with ember 2.3.0; In the official ember docs is written that it should always traverse the templates tree up until it finds a loading template; can someone show me what's wrong here?

UPDATE ----------------------------------------------------

// feed model hook
model: function(params, transition) {
    return this.store.query('photo', {type: 'feed'});
}

// photoDetail model hook
model: function(params, transition) {
    var self = this;

    return Ember.RSVP.hash({
        photo: self.store.find('photo', params.id),
        comments: self.store.query('comment', {id: params.id})
    });
},

and in feed template:

{{#each photo as |item|}}
    {{photo-item item=item}}
{{/each}}

and then the photo-item component:

{{#link-to "webappFrame.photoDetail" item.id}}
    <img class="photoImage" src="{{imageurl item.hash type='photo'}}">
{{/link-to}}

where {{imageurl}} is just an helper that creates the path for the image; here i pass "item.id" to the link-to (instad of passing "item" itself) to force the reload of the photo when entering detail (in order to get also comments)

right now, I've added templates/webapp-frame/loading.hbs and it works; the thing is that the loading template is always the same in the whole app; so I expected to have only one instead of having a copy of it in every /templates subfolder...

Can you add your routes, especially the model hooks, and the link-to helpers that are in your templates — Patsy Issa
As a side note if the path matches the route name you don't have to type it in this.route('feed'); is enough — Patsy Issa
Did also add the loading.hbs as /templates/webappFrame/loading.hbs ? guides.emberjs.com/v2.3.0/routing/loading-and-error-substates — Christian Stengel

Christian Stengel Christian Stengel · Accepted Answer · 2016-01-20T10:05:45

Ember handles the loading templates per route, its always "routename-loading.hbs", it seems you have not created the matching templates that´s why you only see a white page (default). If you´re not sure which templates are necessary or how they have to be named, install ember inspector and check the routes tab, there you can see what ember expects and how it should be named.

Ember loading template works only on page refresh

1 Answers