Merge pull request #3024 from morficus/nprogress-loading-indicator

Re-implementing the loading indicator for the Ember admin

Gruntfile.js

@@ -512,6 +512,7 @@ var path           = require('path'),
 
                             'bower_components/jquery-ui/ui/jquery-ui.js',
                             'bower_components/jquery-file-upload/js/jquery.fileupload.js',
+                            'bower_components/nprogress/nprogress.js',
 
                             'core/shared/lib/showdown/extensions/ghostimagepreview.js',
                             'core/shared/lib/showdown/extensions/ghostgfm.js',

core/client/.jshintrc

@@ -29,6 +29,7 @@
         "$": true,
         "validator": true,
         "ic": true,
-        "_": true
+        "_": true,
+        "NProgress": true
     }
 }

core/client/mixins/editor-route-base.js

@@ -1,8 +1,9 @@
 import ShortcutsRoute from 'ghost/mixins/shortcuts-route';
 import styleBody from 'ghost/mixins/style-body';
-    
+import loadingIndicator from 'ghost/mixins/loading-indicator';
 
-var EditorRouteBase = Ember.Mixin.create(styleBody, ShortcutsRoute, {
+
+var EditorRouteBase = Ember.Mixin.create(styleBody, ShortcutsRoute, loadingIndicator, {
     actions: {
         save: function () {
             this.get('controller').send('save');
@@ -54,4 +55,4 @@ var EditorRouteBase = Ember.Mixin.create(styleBody, ShortcutsRoute, {
     }
 });
 
-export default EditorRouteBase;
+export default EditorRouteBase;

core/client/mixins/loading-indicator.js

@@ -0,0 +1,25 @@
+// mixin used for routes to display a loading indicator when there is network activity
+var loaderOptions = {
+    'showSpinner': false
+};
+NProgress.configure(loaderOptions);
+
+var loadingIndicator = Ember.Mixin.create({
+    actions:  {
+
+        loading: function () {
+            NProgress.start();
+            this.router.one('didTransition', function () {
+                NProgress.done();
+            });
+            return true;
+        },
+
+        error: function () {
+            NProgress.done();
+            return true;
+        }
+    }
+});
+
+export default loadingIndicator;

core/client/routes/debug.js

@@ -1,8 +1,9 @@
 import styleBody from 'ghost/mixins/style-body';
 import AuthenticatedRoute from 'ghost/routes/authenticated';
 import SettingsModel from 'ghost/models/settings';
+import loadingIndicator from 'ghost/mixins/loading-indicator';
 
-export default AuthenticatedRoute.extend(styleBody, {
+export default AuthenticatedRoute.extend(styleBody, loadingIndicator, {
     classNames: ['settings'],
 
     model: function () {

core/client/routes/forgotten.js

@@ -1,6 +1,7 @@
 import styleBody from 'ghost/mixins/style-body';
+import loadingIndicator from 'ghost/mixins/loading-indicator';
 
-var ForgottenRoute = Ember.Route.extend(styleBody, {
+var ForgottenRoute = Ember.Route.extend(styleBody, loadingIndicator, {
     classNames: ['ghost-forgotten']
 });
 

core/client/routes/posts.js

@@ -1,6 +1,7 @@
 import AuthenticatedRoute from 'ghost/routes/authenticated';
 import styleBody from 'ghost/mixins/style-body';
 import ShortcutsRoute from 'ghost/mixins/shortcuts-route';
+import loadingIndicator from 'ghost/mixins/loading-indicator';
 
 var paginationSettings = {
     status: 'all',
@@ -8,7 +9,7 @@ var paginationSettings = {
     page: 1
 };
 
-var PostsRoute = AuthenticatedRoute.extend(ShortcutsRoute, styleBody, {
+var PostsRoute = AuthenticatedRoute.extend(ShortcutsRoute, styleBody, loadingIndicator, {
     classNames: ['manage'],
 
     model: function () {

core/client/routes/posts/index.js

@@ -1,6 +1,7 @@
 import AuthenticatedRoute from 'ghost/routes/authenticated';
+import loadingIndicator from 'ghost/mixins/loading-indicator';
 
-var PostsIndexRoute = AuthenticatedRoute.extend({
+var PostsIndexRoute = AuthenticatedRoute.extend(loadingIndicator, {
     // redirect to first post subroute
     beforeModel: function () {
         var self = this;

core/client/routes/posts/post.js

@@ -1,6 +1,7 @@
 import AuthenticatedRoute from 'ghost/routes/authenticated';
+import loadingIndicator from 'ghost/mixins/loading-indicator';
 
-var PostsPostRoute = AuthenticatedRoute.extend({
+var PostsPostRoute = AuthenticatedRoute.extend(loadingIndicator, {
     model: function (params) {
         var self = this,
             post,

core/client/routes/reset.js

@@ -1,6 +1,7 @@
 import styleBody from 'ghost/mixins/style-body';
+import loadingIndicator from 'ghost/mixins/loading-indicator';
 
-var ResetRoute = Ember.Route.extend(styleBody, {
+var ResetRoute = Ember.Route.extend(styleBody, loadingIndicator, {
     classNames: ['ghost-reset'],
     setupController: function (controller, params) {
         controller.token = params.token;

core/client/routes/settings.js

@@ -1,7 +1,8 @@
 import styleBody from 'ghost/mixins/style-body';
 import AuthenticatedRoute from 'ghost/routes/authenticated';
+import loadingIndicator from 'ghost/mixins/loading-indicator';
 
-var SettingsRoute = AuthenticatedRoute.extend(styleBody, {
+var SettingsRoute = AuthenticatedRoute.extend(styleBody, loadingIndicator, {
     classNames: ['settings']
 });
 

core/client/routes/settings/general.js

@@ -1,6 +1,7 @@
 import AuthenticatedRoute from 'ghost/routes/authenticated';
+import loadingIndicator from 'ghost/mixins/loading-indicator';
 
-var SettingsGeneralRoute = AuthenticatedRoute.extend({
+var SettingsGeneralRoute = AuthenticatedRoute.extend(loadingIndicator, {
     model: function () {
         return this.store.find('setting', { type: 'blog,theme' }).then(function (records) {
             return records.get('firstObject');

core/client/routes/signin.js

@@ -1,9 +1,10 @@
 import ajax from 'ghost/utils/ajax';
 import styleBody from 'ghost/mixins/style-body';
+import loadingIndicator from 'ghost/mixins/loading-indicator';
 
 var isEmpty = Ember.isEmpty;
 
-var SigninRoute = Ember.Route.extend(styleBody, {
+var SigninRoute = Ember.Route.extend(styleBody, loadingIndicator, {
     classNames: ['ghost-login'],
 
     actions: {

core/client/routes/signout.js

@@ -1,8 +1,9 @@
 import ajax from 'ghost/utils/ajax';
 import styleBody from 'ghost/mixins/style-body';
 import AuthenticatedRoute from 'ghost/routes/authenticated';
+import loadingIndicator from 'ghost/mixins/loading-indicator';
 
-var SignoutRoute = AuthenticatedRoute.extend(styleBody, {
+var SignoutRoute = AuthenticatedRoute.extend(styleBody, loadingIndicator, {
     classNames: ['ghost-signout'],
 
     beforeModel: function () {

core/client/routes/signup.js

@@ -1,7 +1,8 @@
 import ajax from 'ghost/utils/ajax';
 import styleBody from 'ghost/mixins/style-body';
+import loadingIndicator from 'ghost/mixins/loading-indicator';
 
-var SignupRoute = Ember.Route.extend(styleBody, {
+var SignupRoute = Ember.Route.extend(styleBody, loadingIndicator, {
     classNames: ['ghost-signup'],
 
     name: null,

core/client/templates/loading.hbs

@@ -1 +0,0 @@
-<h1>Loading...</h1>