Possible two-task approach

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    navIntro() {
      this.transitionToRoute('index');
    },
    navExample() {
      this.transitionToRoute('example');
    }
  }
});

controllers.example.js

import Ember from 'ember';

const {
  Controller,
  computed: { reads, or }
} = Ember;

export default Controller.extend({
  theValue: or('model.{new,old}.value'),
  isFetching: reads('model.new.isRunning'),
  error: reads('model.new.error')
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('example');
});

export default Router;

routes.example.js

import Ember from 'ember';
import { task, timeout } from 'ember-concurrency';

let uid = 1;

export default Ember.Route.extend({
  beforeModel() {
    if (Ember.isNone(this.get('catalogTask.lastSuccessful.value'))) {
      return this.get('catalogTask').perform();
    }
  },
  
  model() {
    return {
      old: this.get('modelTask.lastSuccessful'),
      new: this.get('modelTask').perform()
    };
  },
  
  catalogTask: task(function * () {
    yield timeout(1500);
    return 'done';
  }).keepLatest().cancelOn('deactivate'),
  
  modelTask: task(function * () {
    yield timeout(1500);
    return {title: `foober ${uid++}`};
  }).keepLatest().cancelOn('deactivate')
});

templates.application.hbs

<div class="hack container">
  <h1>Example of the <em>two-task</em> approach</h1>
  
  <div class="alert alert-info">
    Switch between the two routes to see the loading message while it pre-fetches a catalog and then the repeated updates of the model there after.
    <small>Original idea from <a href="https://engineering.linkedin.com/blog/2016/12/ember-concurrency--or--how-i-learned-to-stop-worrying-and-love-t">Adopting ember-concurrency
or: How I Learned to Stop Worrying and Love the Task</a>.</small>
  </div>

  <p>
    <button class="btn btn-default btn-ghost" onclick={{action "navIntro"}}>Intro</button>
    <button class="btn btn-default btn-ghost" onclick={{action "navExample"}}>View Example</button>
  </p>

  {{outlet}}
</div>

templates.example-loading.hbs

<div class="alert alert-warning">
  <div class="loading"></div>
  Loading catalogs…
</div>

templates.example.hbs

<div class="card">
  <header class="card-header">
    Result
  </header>

  <div class="card-content">
    <div class="inner">
      {{#if isFetching}}
        <div class="alert alert-success">
          <div class="loading"></div>
          Fetching model…
        </div>
      {{/if}}
    
      {{theValue.title}}
    </div>
  </div>
</div>

templates.index.hbs

Foobar

twiddle.json

{
  "version": "0.11.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "hack_css": "https://cdnjs.cloudflare.com/ajax/libs/hack/0.7.7/hack.css",
    "ember": "2.10.2",
    "ember-data": "2.11.0",
    "ember-template-compiler": "2.10.2",
    "ember-testing": "2.10.2"
  },
  "addons": {
    "ember-concurrency": "latest"
  }
}