Ember loading substate template not showing

I am developing an Ember-cli app with ember 2.1. I created a templates/loading.hbs and several other templates. My foo template has a input that I use to send a queryParam to foo/bar. foo/bar uses the query param to find its model:

export default Ember.Route.extend({
    queryParams: {
        q: {refreshModel: true}
    },

    model: function (params) {
        if (params.q) {
            return this.store.query('client', { q: params.q });
        } else {
            return {};
        }
    }
});

When I go from foo to foo/bar, the model gets loaded and foo/bar gets rendered correctly, but, during the loading time, I don't get the loading template. If I hit refresh in foo/bar, then I see the loading template.

Can you help me to understand this, and how can I make sure I always get the loading template.

Thanks!