If you navigate to slow-model, in the model hook,
the query may take a long time to complete.
During this time, your UI isn't really giving you any feedback as to
what's happening. If you're entering this route after a full page
refresh, your UI will be entirely blank, as you have not actually
finished fully entering any route and haven't yet displayed any
templates. If you're navigating to slow-model from another
route, you'll continue to see the templates from the previous route
until the model finish loading, and then, boom, suddenly all the
templates for slow-model load.

So, how can we provide some visual feedback during the transition?

Simply define a template called loading (and optionally a corresponding route)
that Ember will transition to. The
intermediate transition into the loading substate happens immediately
(synchronously), the URL won't be updated, and, unlike other transitions, the
currently active transition won't be aborted.

Once the main transition into slow-model completes, the loading
route will be exited and the transition to slow-model will continue.

When accessing foo.bar.slow-model route then Ember will alternate trying to
find a routeName-loading or loading template in the hierarchy starting with
foo.bar.slow-model-loading:

foo.bar.slow-model-loading

foo.bar.loading or foo.bar-loading

foo.loading or foo-loading

loading or application-loading

It's important to note that for slow-model itself, Ember will not try to
find a slow-model.loading template but for the rest of the hierarchy either
syntax is acceptable. This can be useful for creating a custom loading screen
for a leaf route like slow-model.

When accessing foo.bar route then Ember will search for:

foo.bar-loading

foo.loading or foo-loading

loading or application-loading

It's important to note that foo.bar.loading is not considered now.

The loading event

If the various beforeModel/model/afterModel hooks
don't immediately resolve, a loading event will be fired on that route.

As with the loading substate, on a thrown error or rejected promise returned
from the articles.overview route's model hook (or beforeModel or
afterModel) Ember will look for an error template or route in the following
order:

articles.overview-error

articles.error or articles-error

error or application-error

If one of the above is found, the router will immediately transition into
that substate (without updating the URL). The "reason" for the error
(i.e. the exception thrown or the promise reject value) will be passed
to that error state as its model.

The model hooks (beforeModel, model, and afterModel) of an error substate
are not called. Only the setupController method of the error substate is
called with the error as the model. See example below:

If no viable error substates can be found, an error message will be
logged.

The error event

If the articles.overview route's model hook returns a promise that rejects
(for instance the server returned an error, the user isn't logged in,
etc.), an error event will fire from that route and bubble upward.
This error event can be handled and used to display an error message,
redirect to a login page, etc.