New Twiddle

components.loading-indicator.js

import Ember from 'ember';

export default Ember.Component.extend({
  loadingIndicator: Ember.inject.service('loading-indicator'),
  
  classNames: ['loading-indicator'],
  classNameBindings: ['isLoading'],
  isLoading: false,
  
  init() {
    this._super(...arguments);
    
    Ember.run.once(this, function () {
      console.debug('[loading-indicator] Setting events...');
      this.get('loadingIndicator').on('startLoading', this, this.startLoading);
      this.get('loadingIndicator').on('stopLoading', this, this.stopLoading);
    });
  },
  
  willDestroy() {
    Ember.run.once(this, function () {
      console.debug('[loading-indicator] Destroying events...');
      this.get('loadingIndicator').off('startLoading', this, this.startLoading);
      this.get('loadingIndicator').off('stopLoading', this, this.stopLoading);
    });
  },
  
  startLoading() {
		console.debug('[loading-indicator] isLoading:true');
    this.set('isLoading', true);
  },
  
  stopLoading() {
    console.debug('[loading-indicator] isLoading:false');
    this.set('isLoading', false);
  }
});

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('main', { path: '/' }, function() {
    this.route('slow-route', function() {
      this.route('foo');
      this.route('bar');
    });
  });
});

export default Router;

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  loadingIndicator: Ember.inject.service('loading-indicator'),

  
  doActivate: Ember.on('activate', function(){
    console.log('application activating');
  }),
  
  doDeactivate: Ember.on('deactivate', function(){
    console.log('application deactivating');
  }),
  
	actions: {
    willTransition() {
    	this.get('loadingIndicator').start();
      return true;
    },
    
    didTransition() {
    	this.get('loadingIndicator').stop();
      return true;
    },
    
    error() {
      this.get('loadingIndicator').stop();
      return true;
    }
  }
});

routes.index.js

import Ember from 'ember';

export default Ember.Route.extend({
  beforeModel() {
  	return new Ember.RSVP.Promise((resolve) => {
    	Ember.run.later(() => {
      	resolve();
      }, 1000);
    });
  },
    
  doActivate: Ember.on('activate', function(){
    console.log('application.index activating');
  }),
  
  doDeactivate: Ember.on('deactivate', function(){
    console.log('application.index deactivating');
  })
});

routes.main.js

import Ember from 'ember';

export default Ember.Route.extend({
  beforeModel() {
  	return new Ember.RSVP.Promise((resolve) => {
    	Ember.run.later(() => {
      	resolve();
      }, 1000);
    });
  },
  
  doActivate: Ember.on('activate', function(){
    console.log('main activating');
  }),
  
  doDeactivate: Ember.on('deactivate', function(){
    console.log('main deactivating');
  })
});

routes.main.slow-route.bar.js

import Ember from 'ember';

export default Ember.Route.extend({
  beforeModel() {
  	return new Ember.RSVP.Promise((resolve, reject) => {
    	Ember.run.later(() => {
      	reject();
      }, 1000);
    });
  },
  
  doActivate: Ember.on('activate', function(){
    console.log('main.slow-route.bar activating');
  }),
  
  doDeactivate: Ember.on('deactivate', function(){
    console.log('main.slow-route.bar deactivating');
  })
});

routes.main.slow-route.foo.js

import Ember from 'ember';

export default Ember.Route.extend({
  beforeModel() {
  	return new Ember.RSVP.Promise((resolve) => {
    	Ember.run.later(() => {
      	resolve();
      }, 1000);
    });
  },
  
  doActivate: Ember.on('activate', function(){
    console.log('main.slow-route.foo activating');
  }),
  
  doDeactivate: Ember.on('deactivate', function(){
    console.log('main.slow-route.foo deactivating');
  })
});

routes.main.slow-route.js

import Ember from 'ember';

export default Ember.Route.extend({
  beforeModel() {
  	return new Ember.RSVP.Promise((resolve) => {
    	Ember.run.later(() => {
      	resolve();
      }, 1000);
    });
  },
  
  doActivate: Ember.on('activate', function(){
    console.log('main.slow-route activating');
  }),
  
  doDeactivate: Ember.on('deactivate', function(){
    console.log('main.slow-route deactivating');
  })
});

services.loading-indicator.js

import Ember from 'ember';

export default Ember.Service.extend(Ember.Evented, {
  start() {
    console.debug('[loading-indicator] triggering:start');
    this.trigger('startLoading');
  },
  
  stop() {
    console.debug('[loading-indicator] triggering:stop');
  	this.trigger('stopLoading');
  }
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.loading-indicator {
	background-color: grey;
  color: white;
  text-align: center;
}

.is-loading {
	background-color: red;
}

templates.application-loading.hbs

<header>
  {{loading-indicator isLoading=true}}
</header>

templates.application.hbs

{{outlet}}

templates.components.loading-indicator.hbs

<small>{{#if isLoading}}Loading....{{else}}&nbsp;{{/if}}</small>

templates.main.hbs

<header>
  {{loading-indicator}}
	<h1>{{#link-to 'main.index' }}Everything is slow here...{{/link-to}}</h1>
</header>

<section>
	<h1>MAIN.HBS</h1>

	<nav>
  	<ul>
      <li>{{link-to "Foo with success" 'main.slow-route.foo' }}</li>
      <li>{{link-to "Bar with error" 'main.slow-route.bar' }}</li>
    </ul>
  </nav>
  
	{{outlet}}
  
</section>

templates.main.index.hbs

<h1>MAIN.INDEX.HBS</h1>

templates.main.slow-route-loading.hbs

Loading...

{{outlet}}

templates.main.slow-route.bar-error.hbs

<p style='color:red;'>There was an error here...</p>

templates.main.slow-route.bar.hbs

<p>Hello from Bar</p>

templates.main.slow-route.foo.hbs

<p>Hello from Foo</p>

templates.main.slow-route.hbs

<h3>Slow route...</h3>

{{outlet}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}