Skip to content
This repository has been archived by the owner on Nov 28, 2022. It is now read-only.

🏃 improve navigation responsiveness with loading substates #495

Merged
merged 1 commit into from
Jan 17, 2017

Conversation

kevinansfield
Copy link
Member

no issue

  • add loading substates for all routes that previously blocked transitions until their model had finished loading
    • enables immediate response on navigation click
    • loading templates include the title bar to provide immediate indication of which page is loading
    • loading templates include a new {{gh-loading-spinner}} component that will only show the spinner after 200ms to avoid flashing a spinner for users on fast connections

@kevinansfield kevinansfield changed the title 🏃‍♀️ improve navigation responsiveness with loading substates 🏃 improve navigation responsiveness with loading substates Jan 16, 2017
@kevinansfield
Copy link
Member Author

Looks like I have some tests to update here, I'll re-visit those in the morning.

Copy link
Member

@acburdine acburdine left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is throwing errors on various test transitions in travis. Is that a test timing issue or is there something else going on?

@@ -3,6 +3,7 @@ import {htmlSafe} from 'ember-string';
import injectService from 'ember-service/inject';
import run from 'ember-runloop';
import {isEmberArray} from 'ember-array/utils';
import $ from 'jquery';

This comment was marked as abuse.

@kevinansfield
Copy link
Member Author

The test errors here are actually showing a change in behaviour with how version mismatch errors are handled. Previously:

  1. User clicks on a navigation link
  2. New screen models are loaded in the background
  3. Model loads fail with a VersionMismatch error
  4. Alert is shown and user is still on the same page so they can copy unsaved data if needed

With loading substates:

  1. User clicks a navigation link
  2. Immediate transition to newscreen-loading state
  3. Model loads are started in the background
  4. Model loads fail with a VersionMismatch error
  5. Alert is shown but user is now on a loading screen so any data is gone, the loading substate doesn't push anything into the history so the back button won't take the user to the screen they just navigated from

Thinking about this a bit more I'm not sure this is too much of an issue - it will only occur when a user is navigating in which case any unsaved data is gone anyway. A version mismatch error whilst saving will remain on the same page as no transition is kicked off. VersionMismatch errors should also be an extreme edge case.

I'll update the tests to reflect the new behaviour.

no issue
- add loading substates for all routes that previously blocked transitions until their model had finished loading
  - enables immediate response on navigation click
  - loading templates include the title bar to provide immediate indication of which page is loading
  - loading templates include a new `{{gh-loading-spinner}}` component that will only show the spinner after 200ms to avoid flashing a spinner for users on fast connections
- updated Version Mismatch tests to match new behaviour of intermediate transitions when navigating
@coveralls
Copy link

Coverage Status

Coverage increased (+0.7%) to 81.069% when pulling 527ce40 on kevinansfield:loading-substates into 85af326 on TryGhost:master.

@kevinansfield
Copy link
Member Author

@acburdine updated, should be good to go now 😄

@acburdine
Copy link
Member

LGTM 👍

@acburdine acburdine merged commit 7652969 into TryGhost:master Jan 17, 2017
@kevinansfield kevinansfield deleted the loading-substates branch February 4, 2017 09:30
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants