How to define loading route for a nested route in ember-cli

This is my router.js:

Router.map(function() {

  this.resource('articles', function() {
    this.route('article', { path: ':article_id' });
  });
});

When I transition from route

• articles/1 to articles/2 then articles.loading route is displayed.


• articles.index to articles.index, also articles.loading route is displayed.

I need to seperate these loading routes, so when I transition from

• articles/1 to articles/2, articles.article.loading route should be displayed.


• articles.index to articles.index, articles.loading route should be displayed.

Using ember-cli: ember g route articles.loading generates the articles.loading route.

I tried ember g route articles.article.loading, but it doesn't work.