Merge 409f090 into 8791c0b

wikimedia · Mar 1, 2019 · 729f0da · 729f0da
2 parents 8791c0b + 409f090
commit 729f0da
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 6 deletions.
diff --git a/assets/translate.js b/assets/translate.js
@@ -130,6 +130,7 @@ $( window ).on( 'load', function () {
 					requestParams[ tspanId ] = fieldLayout.getField().getValue();
 				} );
 				// Update the image.
+				$( '.image-column' ).addClass( 'loading' );
 				$.ajax( {
 					type: 'POST',
 					url: appConfig.baseUrl + 'api/translate/' + $imgElement.data( 'filename' ) + '/' + targetLangWidget.getValue(),
@@ -139,6 +140,9 @@ $( window ).on( 'load', function () {
 					},
 					error: function () {
 						OO.ui.alert( $.i18n( 'preview-error-occurred' ) );
+					},
+					complete: function () {
+						$( '.image-column' ).removeClass( 'loading' );
 					}
 				} );
 			};

diff --git a/assets/translate.less b/assets/translate.less
@@ -123,8 +123,54 @@ body.translate {
           margin-top: 1rem;
           max-width: 100%;
         }
+        .loading-indicator {
+          height: 4px;
+          width: 100%;
+          position: relative;
+          overflow: hidden;
+          background-color: #fff;
+          margin: 0;
+          padding: 0;
+        }
+        &.loading {
+          .image {
+            cursor: wait;
+          }
+          .loading-indicator::after {
+            display: block;
+            position: absolute;
+            content: "";
+            left: -200px;
+            width: 200px;
+            height: 4px;
+            background-color: @wmui-color-accent50;
+            animation: loading 2s linear infinite;
+          }
+        }
       }
     }
   }
 
 }
+
+@keyframes loading {
+  from {
+    left: -200px;
+    width: 0;
+  }
+  50% {
+    width: 30%;
+  }
+  70% {
+    width: 70%;
+  }
+  80% {
+    left: 40%;
+  }
+  95% {
+    left: 120%;
+  }
+  to {
+    left: 100%;
+  }
+}
diff --git a/public/assets/app.167a8ac9.js → public/assets/app.5bb42dd2.js b/public/assets/app.167a8ac9.js → public/assets/app.5bb42dd2.js
diff --git a/public/assets/app.3574c1c9.css → public/assets/app.b35c56a6.css b/public/assets/app.3574c1c9.css → public/assets/app.b35c56a6.css
diff --git a/public/assets/entrypoints.json b/public/assets/entrypoints.json
@@ -2,10 +2,10 @@
   "entrypoints": {
     "app": {
       "css": [
-        "assets/app.3574c1c9.css"
+        "assets/app.b35c56a6.css"
       ],
       "js": [
-        "assets/app.167a8ac9.js"
+        "assets/app.5bb42dd2.js"
       ]
     }
   }

diff --git a/public/assets/manifest.json b/public/assets/manifest.json
@@ -1,6 +1,6 @@
 {
-  "assets/app.css": "assets/app.3574c1c9.css",
-  "assets/app.js": "assets/app.167a8ac9.js",
+  "assets/app.css": "assets/app.b35c56a6.css",
+  "assets/app.js": "assets/app.5bb42dd2.js",
   "assets/grabbing.cur": "assets/a8c874b93b3d848f39a71260c57e3863.cur",
   "assets/grab.cur": "assets/b06c243f534d9c5461d16528156cd5a8.cur",
   "assets/i18n/app/af.json": "assets/i18n/app/af.json",

diff --git a/templates/translate.html.twig b/templates/translate.html.twig
@@ -44,6 +44,7 @@
                      alt="{{ msg('translation-image-alt') }}"
                      data-filename="{{ filename }}" />
             </div>
+            <div class="loading-indicator"></div>
         </div>
     </form>
 {% endblock %}