What you will learn

• Add the application adapter
• Use Loading Template

Before you start

See the installation instructions. Use tag 6.0.0. (don't forget running npm install and run Ember together with Rails).

Here you will use a Ruby on Rails backend that returns JSON that follows the specifications of JSON API. Although your project still contains Mirage for mocking server requests, Mirage is not used when we start Ember with the --proxy option.

Add the application adapter

• In the terminal change to the frontend folder and enter ember g adapter application
• Open frontend/app/adapters/application.js.
• Replace

export default DS.RESTAdapter.extend({
});

with

export default DS.JSONAPIAdapter.extend({
  namespace: 'api'
});

• In the browser, open the Network tab in the Inspector and make sure the XHR filter is turned on. Edit a product and save the changes and inspect the XHR PUT request.

Use Loading Template

• Open the Rails controller Api::ProductsController and add a sleep of 1 second to the index action:

# backend/app/controllers/api/products_controller.rb
...
before_action :delay

private
def delay
  sleep 1
end
...

• Refresh the app.
• In the terminal, enter ember g template loading.
• Add the following markup:

<i class='fa fa-spin fa-spinner fa-2x' id='loader'></i>

• Refresh the app again and watch the loading spinner.