Starting With Loading Subroutes

Tuning

When the app “boots up,” a request is sent to the backend to fetch the needed data. That might take some time, during which the user is not aware of what’s going on.

As the request is asynchronous, the user doesn’t even see a spinner in the browser tab. Therefore, it’s all the more important to display something while data is being fetched.

Showing errors is similar to showing progress. When something goes wrong in an app rendered on the backend, it is relatively easy to signal this to the user.

In the case of browser applications, the issue is more complex. An extensive error-handling strategy would handle errors depending on their severity and where they were produced. Here, we will focus on the errors that are thrown during the router’s transition to a destination route.

Note: You can download the same spinner image I use from https://s3-eu-west-1.amazonaws.com/rarwe-book/spinner.svg. After you have downloaded it, place it in the public/images folder of your application.

Loading subroutes

Let’s assume that the router transitions from the top all the way to bands.band.songs. For each route, it calls the route’s model hook to resolve the data needed to render the template.

If the data returned in the model hook is not resolved immediately, Ember is designed to trigger a loading event on the route that is being entered. By default, the loading event will render a template named loading at the same level as the route itself.

An example is worth a thousand words, so suppose we are entering the bands route, which has the following model hook: