added updateable status messages through JQM loader

css/css.css

@@ -321,4 +321,50 @@ html body form input.secure_form {
 .crumbs a.ui-btn:after {
   margin-top: -6px;
   font-size: 1.2em;
+}
+/* ============================== status loader ============================== */
+/* fadeout "heartbeat" transition with 1sec delay */
+.loader_icon {
+  display: inline-block;
+  text-align: center;
+  width: 100%;
+}
+.loader_icon:after {
+  font-size: 2.5em;
+}
+.loader_message {
+  text-align: center;
+}
+.ui-loaderx {
+  -webkit-animation-timing-function: ease-in;
+  -webkit-animation-duration: 375ms;
+  -moz-animation-timing-function: ease-in;
+  -moz-animation-duration: 375ms;
+  animation-timing-function: ease-in;
+  animation-duration: 375ms;
+
+}
+@-webkit-keyframes fadeout {
+    0% { opacity: 1; }
+    50% { opacity: 1; }
+    100% { opacity: 0; }
+}
+@-moz-keyframes fadeout {
+    0% { opacity: 1; }
+    50% { opacity: 1; }
+    100% { opacity: 0; }
+}
+@keyframes fadeout {
+    0% { opacity: 1; }
+    50% { opacity: 1; }
+    100% { opacity: 0; }
+}
+.ui-loaderx {
+  opacity: 0;
+  -webkit-animation-duration: 1000ms;
+  -webkit-animation-name: fadeout;
+  -moz-animation-duration: 1000ms;
+  -moz-animation-name: fadeout;
+  animation-duration: 1000ms;
+  animation-name: fadeout;
 }
\ No newline at end of file

js/erp5_loader.js

@@ -3483,10 +3483,7 @@
     );
 
     // trigger sort after 500ms delay, so user can pick sorting criteria
-    if (app.timer) {
-      window.clearTimeout(app.timer);
-      app.timer = 0;
-    }
+    util.clearTimer(); 
 
     for (i = 0; i < config.state.query.sort_on.length; i += 1) {
       if (config.state.query.sort_on[i][0] === column) {
@@ -4793,10 +4790,7 @@
             if ((last && last === val) && type !== "Submit") {
               return;
             }
-            if (app.timer) {
-              window.clearTimeout(app.timer);
-              app.timer = 0;
-            }
+            util.clearTimer();
 
             // give user half second to pick his state
             app.timer = window.setTimeout(function () {
@@ -4964,15 +4958,30 @@
   };
 
   /**
-   * Show and hide the jQuery Mobile loader passing a status message
+   * Clear timer on retriggering methods
+   * @clearTimer
+   */
+  util.clearTimer = function () {
+    if (app.timer) {
+      window.clearTimeout(app.timer);
+      app.timer = 0;
+    }
+  };
+
+  /**
+   * Show and hide the jQuery Mobile status message (loader/icon/message)
    * @method loader
    * @param {boolean} show Whether to show or hide the loader
-   * @param {message} message The message to display in the loader
-   * @param {icon} icon Which icon to display when overriding the loader
+   * @param {string} message The message to display in the loader
+   * @param {string} msg_i18n lookup for status message
+   * @param {string} icon Which icon to display when overriding the loader
    */
-  util.showStatus = function (show, message, icon) {
+  util.updateStatus = function (show, message, msg_i18n, icon) {
+    var text_to_display = i18n ?
+        factory.map_actions.translateLookup(msg_i18n) : message;
+
 
-    // hm... jQuery...
+    // hm... jQuery... 
     if (app.default_dict.loader) {
       $.mobile.loading(
         show ? "show" : "hide",
@@ -4980,11 +4989,17 @@
           "theme": app.default_dict.loader_theme,
           "text": icon === undefined ? message : "",
           "html": icon === undefined ? "" :
-              '<span class="ui-icon-' + icon +
-                  ' loader_icon> </span><h1 class="loader_message">' +
-                      message + '</h1>'
+              '<span class="ui-icon-' + icon + ' loader_icon> </span>'+
+              '<h1 class="loader_message">' + text_to_display + '</h1>'
         }
       );
+
+      // allow multiple updates and remove after 1000ms
+      util.clearTimer();
+
+      app.timer = window.setTimeout(function () {
+        $.mobile.loading("hide");
+      }, 500);
     } else {
       util.errorHandler({"error": "showStatus: Loader not enabled"});
     }