Show information about loading

html/translate.html

@@ -56,7 +56,7 @@
 {% endif %}
 <tr>
 <td></td>
-<td class="toolbar"><a href="#" id="copy-text">{% trans "Copy" %}</a></td>
+<td class="toolbar"><a href="#" id="copy-text">{% trans "Copy" %}</a><img src="/media/loading.gif" id="loading" style="display: none" /></td>
 </tr>
 <tr>
 <th>{% if unit.is_plural %}{% trans "Translations" %}{% else %}{% trans "Translation" %}{% endif %}</th>

media/js/loader.js

@@ -2,9 +2,27 @@ function text_change(e) {
     $('#id_fuzzy').attr('checked', false);
 }
 
+var loading = 0;
+
+function inc_loading() {
+    if (loading == 0) {
+        $('#loading').show();
+    }
+    loading++;
+}
+
+function dec_loading() {
+    loading--;
+    if (loading == 0) {
+        $('#loading').hide();
+    }
+}
+
 function get_source_string(callback) {
+    inc_loading();
     $.get("/js/get/" + $('#id_checksum').attr('value') + '/', function(data) {
         callback(data);
+        dec_loading();
     });
 }
 
@@ -17,10 +35,12 @@ function load_translate_apis() {
     if (typeof(apertium) != 'undefined' && apertium.isTranslatablePair('en', target_language)) {
         add_translate_button('apertium', gettext('Translate using Apertium'), function () {
             get_source_string(function(data) {
+                inc_loading();
                 apertium.translate(data, 'en', target_language, function (ret) {
                     if (!ret.error) {
                         $('#id_target').text(ret.translation);
                     }
+                    dec_loading();
                 });
             });
             return false;
@@ -31,8 +51,10 @@ function load_translate_apis() {
         if (langs.indexOf(target_language) != -1) {
             add_translate_button('microsoft', gettext('Translate using Microsoft Translator'), function () {
                 get_source_string(function(data) {
+                    inc_loading();
                     Microsoft.Translator.translate(data, 'en', target_language, function (ret) {
                         $('#id_target').text(ret);
+                        dec_loading();
                     });
                 });
                 return false;
@@ -41,10 +63,12 @@ function load_translate_apis() {
     }
     add_translate_button('mymemory', gettext('Translate using MyMemory'), function () {
         get_source_string(function(data) {
+            inc_loading();
             $.getJSON("http://mymemory.translated.net/api/get?q=" + data + "&langpair=en|" + target_language, function(data) {
                 if (data.responseData != '') {
                     $('#id_target').text(data.responseData.translatedText);
                 }
+                dec_loading();
             });
         });
     });