Add a Loading View

Learn how to display a loading view to provide feedback to the user while data is being fetched from the server.

We'll cover the following

We currently have a two-second delay when displaying a contact in our Show sub-module. Although our app behaves properly and waits for the data to be returned before displaying the view, it’s not very communicative. The user has absolutely no feedback as to whether the app is actually doing anything useful while they’re waiting.

Create a loading view

To address this issue, let’s create a loading view to display while data is being fetched.

We’ll use the spin.js library, which will enable us to display a spinner animation without having to deal with images:

  • Get spin.js and put the file in assets/js/vendor/spin.js.

  • Get spin.jquery.js and put the file in assets/js/vendor/spin.jquery.js.

Let’s add these new files to index.html:

Get hands-on with 1200+ tech skills courses.