This repository has been archived by the owner on Nov 28, 2022. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 1.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
🏃 improve navigation responsiveness with loading substates (#495)
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
- Loading branch information
1 parent
85af326
commit 7652969
Showing
17 changed files
with
156 additions
and
22 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import Component from 'ember-component'; | ||
import {task, timeout} from 'ember-concurrency'; | ||
|
||
export default Component.extend({ | ||
tagName: '', | ||
|
||
showSpinner: false, | ||
// ms until the loader is displayed, | ||
// prevents unnecessary flash of spinner | ||
slowLoadTimeout: 200, | ||
|
||
startSpinnerTimeout: task(function* () { | ||
yield timeout(this.get('slowLoadTimeout')); | ||
this.set('showSpinner', true); | ||
}), | ||
|
||
didInsertElement() { | ||
this.get('startSpinnerTimeout').perform(); | ||
} | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
{{#if showSpinner}} | ||
<div class="gh-loading-content"> | ||
<div class="gh-loading-spinner"></div> | ||
</div> | ||
{{/if}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
<div class="gh-view"> | ||
<div class="gh-content"> | ||
{{gh-loading-spinner}} | ||
</div> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
<section class="gh-view"> | ||
<header class="view-header"> | ||
{{#gh-view-title openMobileMenu="openMobileMenu"}}<span>Content</span>{{/gh-view-title}} | ||
<section class="view-actions"> | ||
{{#link-to "editor.new" class="btn btn-green" title="New Post"}}New Post{{/link-to}} | ||
</section> | ||
</header> | ||
|
||
<div class="view-container"> | ||
{{gh-loading-spinner}} | ||
</div> | ||
</section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
<div class="gh-view"> | ||
<header class="view-header"> | ||
{{#gh-view-title openMobileMenu="openMobileMenu"}}<span style="padding-left:1px">Apps</span>{{/gh-view-title}} | ||
</header> | ||
|
||
<div class="view-content"> | ||
{{gh-loading-spinner}} | ||
</div> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
<section class="gh-view"> | ||
<header class="view-header"> | ||
{{#gh-view-title openMobileMenu="openMobileMenu"}}<span>Code Injection</span>{{/gh-view-title}} | ||
<section class="view-actions"> | ||
{{#gh-spin-button class="btn btn-blue" action="save" submitting=submitting}}Save{{/gh-spin-button}} | ||
</section> | ||
</header> | ||
|
||
<section class="view-content"> | ||
{{gh-loading-spinner}} | ||
</section> | ||
</section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
<section class="gh-view"> | ||
<header class="view-header"> | ||
{{#gh-view-title openMobileMenu="openMobileMenu"}}<span>General</span>{{/gh-view-title}} | ||
<section class="view-actions"> | ||
{{#gh-spin-button class="btn btn-blue" action="save" submitting=submitting}}Save{{/gh-spin-button}} | ||
</section> | ||
</header> | ||
|
||
<section class="view-content"> | ||
{{gh-loading-spinner}} | ||
</section> | ||
</section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
<section class="gh-view"> | ||
<header class="view-header"> | ||
{{#gh-view-title openMobileMenu="openMobileMenu"}}<span>Labs</span>{{/gh-view-title}} | ||
</header> | ||
|
||
<div class="view-content"> | ||
{{gh-loading-spinner}} | ||
</div> | ||
</section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
<section class="gh-view"> | ||
<header class="view-header"> | ||
{{#gh-view-title openMobileMenu="openMobileMenu"}}<span>Navigation</span>{{/gh-view-title}} | ||
<section class="view-actions"> | ||
{{#gh-spin-button class="btn btn-blue" action="save" submitting=submitting}}Save{{/gh-spin-button}} | ||
</section> | ||
</header> | ||
|
||
<section class="view-content"> | ||
{{gh-loading-spinner}} | ||
</section> | ||
</section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
<section class="gh-view"> | ||
<header class="view-header"> | ||
{{#gh-view-title openMobileMenu="openMobileMenu"}}<span>Tags</span>{{/gh-view-title}} | ||
<section class="view-actions"> | ||
{{#link-to "settings.tags.new" class="btn btn-green" title="New Tag"}}New Tag{{/link-to}} | ||
</section> | ||
</header> | ||
|
||
<div class="view-content"> | ||
{{gh-loading-spinner}} | ||
</div> | ||
</section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
<section class="gh-view"> | ||
<header class="view-header"> | ||
{{#gh-view-title openMobileMenu="openMobileMenu"}}<span>Team</span>{{/gh-view-title}} | ||
{{!-- Do not show Invite user button to authors --}} | ||
{{#unless session.user.isAuthor}} | ||
<section class="view-actions"> | ||
<button class="btn btn-green">Invite People</button> | ||
</section> | ||
{{/unless}} | ||
</header> | ||
|
||
<div class="view-container"> | ||
{{gh-loading-spinner}} | ||
</div> | ||
</section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
<section class="gh-view"> | ||
<header class="view-header"> | ||
{{#gh-view-title openMobileMenu="openMobileMenu"}} | ||
{{link-to "Team" "team"}} | ||
<i class="icon-arrow-right"></i> | ||
{{/gh-view-title}} | ||
|
||
<section class="view-actions"> | ||
<div class="btn btn-blue">Save</div> | ||
</section> | ||
</header> | ||
|
||
<div class="view-container"> | ||
{{gh-loading-spinner}} | ||
</div> | ||
</section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters