🏃 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
TryGhost · Jan 17, 2017 · 7652969 · 7652969
1 parent 85af326
commit 7652969
Show file tree

Hide file tree

Showing 17 changed files with 156 additions and 22 deletions.
diff --git a/app/components/gh-loading-spinner.js 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
@@ -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
@@ -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
@@ -0,0 +1,5 @@
+{{#if showSpinner}}
+    <div class="gh-loading-content">
+        <div class="gh-loading-spinner"></div>
+    </div>
+{{/if}}
diff --git a/app/templates/components/gh-subscribers-table.hbs b/app/templates/components/gh-subscribers-table.hbs
@@ -13,7 +13,9 @@
     }}
         {{#if isLoading}}
             {{#body.loader}}
-                <span class="gh-subscribers-loading">Loading...</span>
+                <div class="gh-loading-content" style="margin-top: 2em;">
+                    <div class="gh-loading-spinner"></div>
+                </div>
             {{/body.loader}}
         {{else}}
             {{#if table.isEmpty}}
@@ -23,4 +25,4 @@
             {{/if}}
         {{/if}}
     {{/t.body}}
-{{/light-table}}
+{{/light-table}}
diff --git a/app/templates/editor/edit-loading.hbs b/app/templates/editor/edit-loading.hbs
@@ -0,0 +1,5 @@
+<div class="gh-view">
+    <div class="gh-content">
+        {{gh-loading-spinner}}
+    </div>
+</div>
diff --git a/app/templates/posts-loading.hbs b/app/templates/posts-loading.hbs
@@ -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>
diff --git a/app/templates/settings/apps-loading.hbs b/app/templates/settings/apps-loading.hbs
@@ -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>
diff --git a/app/templates/settings/code-injection-loading.hbs b/app/templates/settings/code-injection-loading.hbs
@@ -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>
diff --git a/app/templates/settings/general-loading.hbs b/app/templates/settings/general-loading.hbs
@@ -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>
diff --git a/app/templates/settings/labs-loading.hbs b/app/templates/settings/labs-loading.hbs
@@ -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>
diff --git a/app/templates/settings/navigation-loading.hbs b/app/templates/settings/navigation-loading.hbs
@@ -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>
diff --git a/app/templates/settings/tags-loading.hbs b/app/templates/settings/tags-loading.hbs
@@ -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>
diff --git a/app/templates/settings/tags.hbs b/app/templates/settings/tags.hbs
@@ -3,7 +3,6 @@
         {{#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}}
-            {{!-- <button type="button" class="btn btn-green" {{action "newTag"}}>New Tag</button> --}}
         </section>
     </header>
 
@@ -24,4 +23,4 @@
             {{outlet}}
         </section>
     {{/gh-tags-management-container}}
-</section>
+</section>
diff --git a/app/templates/team/index-loading.hbs b/app/templates/team/index-loading.hbs
@@ -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>
diff --git a/app/templates/team/user-loading.hbs b/app/templates/team/user-loading.hbs
@@ -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>
diff --git 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);