From 7652969747712528a9e3093d1f4bea081a0eb1ee Mon Sep 17 00:00:00 2001 From: Kevin Ansfield Date: Tue, 17 Jan 2017 23:44:08 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=8F=83=20improve=20navigation=20responsiv?= =?UTF-8?q?eness=20with=20loading=20substates=20(#495)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- app/components/gh-loading-spinner.js | 20 +++++++++++++++++++ app/routes/settings/apps.js | 4 +++- app/styles/components/loading-indicator.css | 20 ++++++------------- .../components/gh-loading-spinner.hbs | 5 +++++ .../components/gh-subscribers-table.hbs | 6 ++++-- app/templates/editor/edit-loading.hbs | 5 +++++ app/templates/posts-loading.hbs | 12 +++++++++++ app/templates/settings/apps-loading.hbs | 9 +++++++++ .../settings/code-injection-loading.hbs | 12 +++++++++++ app/templates/settings/general-loading.hbs | 12 +++++++++++ app/templates/settings/labs-loading.hbs | 9 +++++++++ app/templates/settings/navigation-loading.hbs | 12 +++++++++++ app/templates/settings/tags-loading.hbs | 12 +++++++++++ app/templates/settings/tags.hbs | 3 +-- app/templates/team/index-loading.hbs | 15 ++++++++++++++ app/templates/team/user-loading.hbs | 16 +++++++++++++++ tests/acceptance/version-mismatch-test.js | 6 +++--- 17 files changed, 156 insertions(+), 22 deletions(-) create mode 100644 app/components/gh-loading-spinner.js create mode 100644 app/templates/components/gh-loading-spinner.hbs create mode 100644 app/templates/editor/edit-loading.hbs create mode 100644 app/templates/posts-loading.hbs create mode 100644 app/templates/settings/apps-loading.hbs create mode 100644 app/templates/settings/code-injection-loading.hbs create mode 100644 app/templates/settings/general-loading.hbs create mode 100644 app/templates/settings/labs-loading.hbs create mode 100644 app/templates/settings/navigation-loading.hbs create mode 100644 app/templates/settings/tags-loading.hbs create mode 100644 app/templates/team/index-loading.hbs create mode 100644 app/templates/team/user-loading.hbs diff --git a/app/components/gh-loading-spinner.js b/app/components/gh-loading-spinner.js new file mode 100644 index 0000000000..c80280d946 --- /dev/null +++ b/app/components/gh-loading-spinner.js @@ -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(); + } +}); diff --git a/app/routes/settings/apps.js b/app/routes/settings/apps.js index 37e9500c00..a0284dbdc9 100644 --- a/app/routes/settings/apps.js +++ b/app/routes/settings/apps.js @@ -15,6 +15,8 @@ export default AuthenticatedRoute.extend(styleBody, CurrentUserSettings, { }, model() { - return this.store.queryRecord('setting', {type: 'blog,theme,private'}); + return this.store.query('setting', {type: 'blog,theme,private'}).then((records) => { + return records.get('firstObject'); + }); } }); diff --git a/app/styles/components/loading-indicator.css b/app/styles/components/loading-indicator.css index 335864e6df..3d4b3d36c9 100644 --- a/app/styles/components/loading-indicator.css +++ b/app/styles/components/loading-indicator.css @@ -1,24 +1,16 @@ /* Loading state */ -.ember-load-indicator { +.gh-loading-content { display: flex; flex-direction: row; - align-items: stretch; + align-items: center; overflow: hidden; - width: 100%; - position: absolute; top: 0; bottom: 0; - padding-bottom: 8vh; -} - -.gh-loading-content { - position: relative; - flex-grow: 1; - display: flex; - align-items: center; + position: absolute; + width: 100%; justify-content: center; - background: #fff; - flex-direction: column; + left: 0; + padding-bottom: 8vh; } .gh-loading-content.basic-auth { diff --git a/app/templates/components/gh-loading-spinner.hbs b/app/templates/components/gh-loading-spinner.hbs new file mode 100644 index 0000000000..260b5fdb05 --- /dev/null +++ b/app/templates/components/gh-loading-spinner.hbs @@ -0,0 +1,5 @@ +{{#if showSpinner}} +
+ +
+{{/if}} \ No newline at end of file diff --git a/app/templates/components/gh-subscribers-table.hbs b/app/templates/components/gh-subscribers-table.hbs index f5cc5a3bf4..9015ed74fd 100644 --- a/app/templates/components/gh-subscribers-table.hbs +++ b/app/templates/components/gh-subscribers-table.hbs @@ -13,7 +13,9 @@ }} {{#if isLoading}} {{#body.loader}} - Loading... +
+ +
{{/body.loader}} {{else}} {{#if table.isEmpty}} @@ -23,4 +25,4 @@ {{/if}} {{/if}} {{/t.body}} -{{/light-table}} +{{/light-table}} \ No newline at end of file diff --git a/app/templates/editor/edit-loading.hbs b/app/templates/editor/edit-loading.hbs new file mode 100644 index 0000000000..21a6391a83 --- /dev/null +++ b/app/templates/editor/edit-loading.hbs @@ -0,0 +1,5 @@ +
+
+ {{gh-loading-spinner}} +
+
\ No newline at end of file diff --git a/app/templates/posts-loading.hbs b/app/templates/posts-loading.hbs new file mode 100644 index 0000000000..05aa2e07f6 --- /dev/null +++ b/app/templates/posts-loading.hbs @@ -0,0 +1,12 @@ +
+
+ {{#gh-view-title openMobileMenu="openMobileMenu"}}Content{{/gh-view-title}} +
+ {{#link-to "editor.new" class="btn btn-green" title="New Post"}}New Post{{/link-to}} +
+
+ +
+ {{gh-loading-spinner}} +
+
\ No newline at end of file diff --git a/app/templates/settings/apps-loading.hbs b/app/templates/settings/apps-loading.hbs new file mode 100644 index 0000000000..f424f616e8 --- /dev/null +++ b/app/templates/settings/apps-loading.hbs @@ -0,0 +1,9 @@ +
+
+ {{#gh-view-title openMobileMenu="openMobileMenu"}}Apps{{/gh-view-title}} +
+ +
+ {{gh-loading-spinner}} +
+
\ No newline at end of file diff --git a/app/templates/settings/code-injection-loading.hbs b/app/templates/settings/code-injection-loading.hbs new file mode 100644 index 0000000000..d96992a835 --- /dev/null +++ b/app/templates/settings/code-injection-loading.hbs @@ -0,0 +1,12 @@ +
+
+ {{#gh-view-title openMobileMenu="openMobileMenu"}}Code Injection{{/gh-view-title}} +
+ {{#gh-spin-button class="btn btn-blue" action="save" submitting=submitting}}Save{{/gh-spin-button}} +
+
+ +
+ {{gh-loading-spinner}} +
+
\ No newline at end of file diff --git a/app/templates/settings/general-loading.hbs b/app/templates/settings/general-loading.hbs new file mode 100644 index 0000000000..a8e433f0d2 --- /dev/null +++ b/app/templates/settings/general-loading.hbs @@ -0,0 +1,12 @@ +
+
+ {{#gh-view-title openMobileMenu="openMobileMenu"}}General{{/gh-view-title}} +
+ {{#gh-spin-button class="btn btn-blue" action="save" submitting=submitting}}Save{{/gh-spin-button}} +
+
+ +
+ {{gh-loading-spinner}} +
+
\ No newline at end of file diff --git a/app/templates/settings/labs-loading.hbs b/app/templates/settings/labs-loading.hbs new file mode 100644 index 0000000000..00fab7ec86 --- /dev/null +++ b/app/templates/settings/labs-loading.hbs @@ -0,0 +1,9 @@ +
+
+ {{#gh-view-title openMobileMenu="openMobileMenu"}}Labs{{/gh-view-title}} +
+ +
+ {{gh-loading-spinner}} +
+
\ No newline at end of file diff --git a/app/templates/settings/navigation-loading.hbs b/app/templates/settings/navigation-loading.hbs new file mode 100644 index 0000000000..9ff3c8dcb7 --- /dev/null +++ b/app/templates/settings/navigation-loading.hbs @@ -0,0 +1,12 @@ +
+
+ {{#gh-view-title openMobileMenu="openMobileMenu"}}Navigation{{/gh-view-title}} +
+ {{#gh-spin-button class="btn btn-blue" action="save" submitting=submitting}}Save{{/gh-spin-button}} +
+
+ +
+ {{gh-loading-spinner}} +
+
\ No newline at end of file diff --git a/app/templates/settings/tags-loading.hbs b/app/templates/settings/tags-loading.hbs new file mode 100644 index 0000000000..eb54436de9 --- /dev/null +++ b/app/templates/settings/tags-loading.hbs @@ -0,0 +1,12 @@ +
+
+ {{#gh-view-title openMobileMenu="openMobileMenu"}}Tags{{/gh-view-title}} +
+ {{#link-to "settings.tags.new" class="btn btn-green" title="New Tag"}}New Tag{{/link-to}} +
+
+ +
+ {{gh-loading-spinner}} +
+
\ No newline at end of file diff --git a/app/templates/settings/tags.hbs b/app/templates/settings/tags.hbs index f67750a544..bfd6394981 100644 --- a/app/templates/settings/tags.hbs +++ b/app/templates/settings/tags.hbs @@ -3,7 +3,6 @@ {{#gh-view-title openMobileMenu="openMobileMenu"}}Tags{{/gh-view-title}}
{{#link-to "settings.tags.new" class="btn btn-green" title="New Tag"}}New Tag{{/link-to}} - {{!-- --}}
@@ -24,4 +23,4 @@ {{outlet}} {{/gh-tags-management-container}} - + \ No newline at end of file diff --git a/app/templates/team/index-loading.hbs b/app/templates/team/index-loading.hbs new file mode 100644 index 0000000000..a0a38e4122 --- /dev/null +++ b/app/templates/team/index-loading.hbs @@ -0,0 +1,15 @@ +
+
+ {{#gh-view-title openMobileMenu="openMobileMenu"}}Team{{/gh-view-title}} + {{!-- Do not show Invite user button to authors --}} + {{#unless session.user.isAuthor}} +
+ +
+ {{/unless}} +
+ +
+ {{gh-loading-spinner}} +
+
\ No newline at end of file diff --git a/app/templates/team/user-loading.hbs b/app/templates/team/user-loading.hbs new file mode 100644 index 0000000000..92b5bd5334 --- /dev/null +++ b/app/templates/team/user-loading.hbs @@ -0,0 +1,16 @@ +
+
+ {{#gh-view-title openMobileMenu="openMobileMenu"}} + {{link-to "Team" "team"}} + + {{/gh-view-title}} + +
+
Save
+
+
+ +
+ {{gh-loading-spinner}} +
+
\ No newline at end of file diff --git a/tests/acceptance/version-mismatch-test.js b/tests/acceptance/version-mismatch-test.js index 51acb5f7c3..79247aca7b 100644 --- a/tests/acceptance/version-mismatch-test.js +++ b/tests/acceptance/version-mismatch-test.js @@ -63,8 +63,8 @@ describe('Acceptance: Version Mismatch', function() { click('.gh-nav-settings-tags'); andThen(() => { - // navigation is blocked - expect(currentPath()).to.equal('posts.index'); + // navigation is blocked on loading screen + expect(currentPath()).to.equal('settings.tags_loading'); // has the refresh to update alert expect(find('.gh-alert').length).to.equal(1); @@ -80,7 +80,7 @@ describe('Acceptance: Version Mismatch', function() { andThen(() => { // navigation is blocked - expect(currentPath()).to.equal('settings.tags.index'); + expect(currentPath()).to.equal('settings.general_loading'); // has the refresh to update alert expect(find('.gh-alert').length).to.equal(1);