Add nprogress instead of spin

Author: ta2-1

pootle/apps/pootle_app/assets.py

@@ -81,5 +81,6 @@
 
 css_editor = Bundle(
     'css/editor.css',
+    'css/nprogress.css',
     filters='cssmin', output='css/editor.min.%(version)s.css')
 register('css_editor', css_editor)

pootle/static/css/nprogress.css

@@ -0,0 +1,81 @@
+#nprogress
+{
+  pointer-events: none;
+}
+
+#nprogress .bar
+{
+  background: #29d;
+
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 2px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg
+{
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
+  opacity: 1.0;
+
+  -webkit-transform: rotate(3deg) translate(0px, -4px);
+      -ms-transform: rotate(3deg) translate(0px, -4px);
+          transform: rotate(3deg) translate(0px, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner
+{
+  display: block;
+  position: fixed;
+  z-index: 1031;
+  top: 15px;
+  right: 15px;
+}
+
+#nprogress .spinner-icon
+{
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+
+  border: solid 2px transparent;
+  border-top-color: #29d;
+  border-left-color: #29d;
+  border-radius: 50%;
+
+  -webkit-animation: nprogress-spinner 400ms linear infinite;
+          animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent
+{
+  overflow: hidden;
+  position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar
+{
+  position: absolute;
+}
+
+@-webkit-keyframes nprogress-spinner
+{
+  0%   { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+@keyframes nprogress-spinner
+{
+  0%   { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

pootle/static/js/editor/app.js

@@ -26,6 +26,7 @@ import cx from 'classnames';
 import Levenshtein from 'levenshtein';
 import mousetrap from 'mousetrap';
 import assign from 'object-assign';
+import NProgress from 'nprogress';
 
 import UnitAPI from 'api/UnitAPI';
 import cookie from 'utils/cookie';
@@ -51,6 +52,10 @@ import ReactEditor from './index';
 // be the actual entry point, entirely superseding the `app` module.
 PTL.reactEditor = ReactEditor;
 
+NProgress.configure({
+  parent: '#body',
+  showSpinner: false,
+});
 
 const CTX_STEP = 1;
 
@@ -135,7 +140,6 @@ PTL.editor = {
 
     /* Cached elements */
     this.backToBrowserEl = q('.js-back-to-browser');
-    this.$editorActivity = $('#js-editor-act');
     this.$editorBody = $('.js-editor-body');
     this.editorTableEl = q('.js-editor-table');
     this.$filterStatus = $('#js-filter-status');
@@ -166,8 +170,8 @@ PTL.editor = {
 
     this.isUnitDirty = false;
 
-    this.isLoading = true;
     this.showActivity();
+    this.isLoading = true;
 
     this.fetchingOffsets = [];
 
@@ -405,9 +409,7 @@ PTL.editor = {
         return;
       }
 
-      this.delayedActivityTimer = setTimeout(() => {
-        this.showActivity();
-      }, 3000);
+      this.showActivity();
     });
     $(document).ajaxStop(() => {
       clearTimeout(this.delayedActivityTimer);
@@ -642,7 +644,6 @@ PTL.editor = {
     this.isUnitDirty = false;
     this.keepState = false;
     this.isLoading = false;
-    this.hideActivity();
   },
 
   /* Things to do when no results are returned */
@@ -1028,11 +1029,18 @@ PTL.editor = {
 
   showActivity() {
     this.hideMsg();
-    this.$editorActivity.spin().fadeIn(300);
+    if (this.isLoading) {
+      return;
+    }
+    clearTimeout(this.delayedActivityTimer);
+    this.delayedActivityTimer = setTimeout(() => NProgress.start(), 3000);
   },
 
   hideActivity() {
-    this.$editorActivity.spin(false).fadeOut(300);
+    if (!this.isLoading) {
+      clearTimeout(this.delayedActivityTimer);
+      NProgress.done();
+    }
   },
 
   /* Displays an informative message */

pootle/static/js/package.json

@@ -42,6 +42,7 @@
     "diff-match-patch": "^1.0.0",
     "imports-loader": "^0.6.3",
     "mousetrap": "^1.5.3",
+    "nprogress": "^0.2.0",
     "object-assign": "^2.0.0",
     "react": "^0.14.6",
     "react-addons-pure-render-mixin": "^0.14.6",

pootle/templates/editor/_editor.html

@@ -1,8 +1,6 @@
 {% load locale %}
 <div id="editor">
-  <div id="js-editor-act" class="hide editor-overlay loader"></div>
   <div id="js-editor-msg-overlay"></div>
-
   <table class="translate-table js-editor-table {% if cansuggest and not cantranslate %} suggest-mode{% endif %}" dir="{% locale_dir %}">
     <tbody class="js-editor-body">
     </tbody>