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 inassets/js/vendor/spin.js
.Get
spin.jquery.js
and put the file inassets/js/vendor/spin.jquery.js
.
Let’s add these new files to index.html
:
Get hands-on with 1200+ tech skills courses.