Indicating Progress - Loading Routes in Ember.js

18 June 2014

When an Ember app is being loaded at first, the user sees a blank screen. When
transitioning between two routes and loading data to render for the destination
template, there is no indication that something is happening and thus the user can
be perplexed. Ideally, loading data happens fast enough so that users barely
notice the blank screen or freeze, but web apps do not always behave ideally.

If you have read some of my other articles on Ember, you will not be surprised
to hear that there is a splendid solution for this problem and that it is based
on a convention.

Unresolved promises

The model hook of routes is the canonical place to fetch data needed
to render the corresponding template. When a promise is returned, execution is
blocked until that promise is resolved (or rejected). That is the period during
which the application seems unresponsive. When starting up the application,
this can even mean that the user only sees a blank screen. Since data is fetched
asyncronously, not even the spinner in the tab title is going to spin.

The user may just close the tab and go on with her life. We can’t let that
happen and unsurprisingly Ember has a convention-based solution that is easy to
work with and customize.

Beautiful, reusable conventions

We saw how each resource route (and thus each route level) creates an
outlet for the level below to render content in. Let’s take a look at the routes
of the application to see how that plays out:

The artist template also defines an outlet into which content is rendered by
the routes below the artist resource. In this case, there is no common markup
for a single artist so the template only defines the outlet: