Demonstrate Loading and Error Substates

controllers.application.js

import Controller from '@ember/controller';
import { inject as service } from '@ember/service';
import { reads } from '@ember/object/computed';

export default class ApplicationController extends Controller {
  router = service('router');
  
  current = reads('router.currentRouteName');
}

router.js

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

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

Router.map(function() {
  this.route('sub-route-a');
});

export default Router;

routes.application.js

import Route from '@ember/routing/route';

export default class AppRoute extends Route {
  actions = {
   loading(transition, originRoute) {
     return true; // allows the loading template to be shown
   },
   error(error, transition) {
     return true;
   }
  }
}

routes.index.js

import Route from '@ember/routing/route';

export default class AppRoute extends Route {
  async model() {
    await new Promise((resolve, reject) => {
      setTimeout(
        () => reject(new Error('ya')), 
        5000
      );
    });
  }
}

routes.sub-route-a.js

import Route from '@ember/routing/route';

export default class SubRouteA extends Route {
  async model() {
    await new Promise((resolve, reject) => {
      setTimeout(
        () => reject(new Error('ya')), 
        5000
      );
    });
  }
}

templates.application.hbs

<h1>Welcome to {{this.appName}}</h1>
<br>
Current: {{this.current}}
<br>
{{outlet}}
<br>
<br>

{{#link-to 'sub-route-a'}}
  Sub Route A
{{/link-to}}

templates.error.hbs

what ever goes here

{{this.model}}

templates.loading.hbs

Loading...

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}