Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding a Loading Spinner #4

Closed
wants to merge 10 commits into from
Closed

Adding a Loading Spinner #4

wants to merge 10 commits into from

Conversation

mansona
Copy link
Member

@mansona mansona commented Nov 29, 2018

screen recording 2018-11-29 at 12 20 p m

(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 empress/guidemaker#4
Fixes ember-learn/cli-guides#66

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

@mansona
Copy link
Member Author

mansona commented Nov 29, 2018

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
Copy link
Member

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
Copy link
Contributor

locks commented Mar 27, 2019

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

@mansona
Copy link
Member Author

mansona commented Mar 27, 2019

@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
Copy link
Member

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Navigation glitch on iOS Create a loading animation
4 participants