Adding a Loading Spinner

[mansona]

(by the way, the above gif has the network severely throttled 😂 It's not nearly as bad as that in reality! You can check the netlify deploy preview to see for yourself)

Fixes https://github.com/empress/guidemaker/issues/4 Fixes https://github.com/ember-learn/cli-guides/issues/66

This PR just adds a simple loading spinner using ember-cli-spinjs

[mansona]

Implementing this has reminded me why we might not want to have something like this.

After the initial Prember page load the app then goes into the loading state when it's re-loading the data from the network so the user experience looks like:

• Realatively fast static page load (thanks to prember)
• (app downloads in the background)
• When the app is finished downloading it loads the model hook for the current page again
• Loading spinner replaces page content
• Page content comes back when it is loaded from Ember

I don't know if this is something that is designed to be fixed by rehydration or if there is some other fastboot based technology that is supposed to fix this 🤔

[sivakumar-kailasam]

Rehydration is supposed to solve this problem. Also I think in API docs we used ember data shoebox to avoid that first network call, making that initial reload to be instant for now. Rehydration is available behind a feature flag so we can experiment with it if we want to.

When looking at adding the spinner, I'd suggest we think of it in terms of someone who has loaded the app and then continues to read through the guides. In a slow network, not having a page transition is not great ux.

I'd suggest we add the spinner/skeleton paragraphs for now & then start exploring things like rehydration or prefectching sibling content to improve the ux to be much better

[locks]

Could we not use something from http://tobiasahlin.com/spinkit/ like we already do in other places?

[mansona]

@locks this isn't a question of what we use to get the spinner, but instead all of the other issues around adding a spinner.

Firstly we need to do an experiment with shoebox to see if we can prevent the spinner loading after the prember page is loaded and before the Ember app downloads the JSON 🤔

[jaredgalanis]

This looks very stale and it might not be something we want so we're closing it for now. Feel free to re-open or address if needed. Thanks for the discussion on this issue!