Add nprogress instead of spin

Author: ta2-1

pootle/static/css/editor.css

@@ -158,6 +158,20 @@ textarea.translation,
     margin: 180px auto;
 }
 
+.editor-progress-container
+{
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 99;
+}
+
+.editor-progress
+{
+    height: 5px;
+}
+
 .editor-overlay
 {
     background-color: rgba(255, 255, 255, 0.8);

pootle/static/js/editor/app.js

@@ -26,6 +26,8 @@ import cx from 'classnames';
 import Levenshtein from 'levenshtein';
 import mousetrap from 'mousetrap';
 import assign from 'object-assign';
+import NProgress from 'nprogress';
+import 'nprogress/nprogress.css';
 
 import UnitAPI from 'api/UnitAPI';
 import cookie from 'utils/cookie';
@@ -51,6 +53,10 @@ import ReactEditor from './index';
 // be the actual entry point, entirely superseding the `app` module.
 PTL.reactEditor = ReactEditor;
 
+NProgress.configure({
+  parent: '#js-editor-progress',
+  showSpinner: false,
+});
 
 const CTX_STEP = 1;
 
@@ -135,7 +141,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 +171,8 @@ PTL.editor = {
 
     this.isUnitDirty = false;
 
-    this.isLoading = true;
     this.showActivity();
+    this.isLoading = true;
 
     this.fetchingOffsets = [];
 
@@ -405,9 +410,7 @@ PTL.editor = {
         return;
       }
 
-      this.delayedActivityTimer = setTimeout(() => {
-        this.showActivity();
-      }, 3000);
+      this.showActivity();
     });
     $(document).ajaxStop(() => {
       clearTimeout(this.delayedActivityTimer);
@@ -642,7 +645,6 @@ PTL.editor = {
     this.isUnitDirty = false;
     this.keepState = false;
     this.isLoading = false;
-    this.hideActivity();
   },
 
   /* Things to do when no results are returned */
@@ -1028,11 +1030,18 @@ PTL.editor = {
 
   showActivity() {
     this.hideMsg();
-    this.$editorActivity.spin().fadeIn(300);
+    if (this.isLoading) {
+      return;
+    }
+    clearTimeout(this.delayedActivityTimer);
+    this.delayedActivityTimer = setTimeout(() => NProgress.start(), 2000);
   },
 
   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>

pootle/templates/editor/main.html

@@ -20,6 +20,9 @@
 
 {% block pre_content %}
 {% include 'editor/_toolbar.html' %}
+  <div class="editor-progress-container">
+    <div id="js-editor-progress" class="editor-progress"></div>
+  </div>
 {% endblock %}
 
 {% block content %}