From a9ad90fa6795e329eeb3d752653b8861525518cf Mon Sep 17 00:00:00 2001
From: niv-openerp <nicolas.vanhoren@openerp.com>
Date: Thu, 16 Aug 2012 18:11:19 +0200
Subject: [PATCH] [IMP] Added critical improvement to enable users to
 understand when the application is actually loading, by adding a "Loading..."
 label under the loading spinner. This was added after we realized that most
 people (I mean, al's father) don't understand that.

bzr revid: nicolas.vanhoren@openerp.com-20120816161119-qap032jpv2dzjlf1
---
 addons/web/static/src/js/coresetup.js | 59 ++++++++++++++++-----------
 addons/web/static/src/xml/base.xml    |  9 +++-
 2 files changed, 44 insertions(+), 24 deletions(-)

diff --git a/addons/web/static/src/js/coresetup.js b/addons/web/static/src/js/coresetup.js
index d5b87d8a81d..229a82a1784 100644
--- a/addons/web/static/src/js/coresetup.js
+++ b/addons/web/static/src/js/coresetup.js
@@ -523,37 +523,50 @@ $.async_when = function() {
 /** Setup blockui */
 if ($.blockUI) {
     $.blockUI.defaults.baseZ = 1100;
-    $.blockUI.defaults.message = '<div class="oe_blockui_spin" style="height: 50px">';
+    $.blockUI.defaults.message = '<div class="oe_blockui_spin_container">';
     $.blockUI.defaults.css.border = '0';
     $.blockUI.defaults.css["background-color"] = '';
-    $.blockUI.spinners = [];
 }
+
+instance.web.Throbber = instance.web.Widget.extend({
+    template: "Throbber",
+    start: function() {
+        var opts = {
+          lines: 13, // The number of lines to draw
+          length: 7, // The length of each line
+          width: 4, // The line thickness
+          radius: 10, // The radius of the inner circle
+          rotate: 0, // The rotation offset
+          color: '#FFF', // #rgb or #rrggbb
+          speed: 1, // Rounds per second
+          trail: 60, // Afterglow percentage
+          shadow: false, // Whether to render a shadow
+          hwaccel: false, // Whether to use hardware acceleration
+          className: 'spinner', // The CSS class to assign to the spinner
+          zIndex: 2e9, // The z-index (defaults to 2000000000)
+          top: 'auto', // Top position relative to parent in px
+          left: 'auto' // Left position relative to parent in px
+        };
+        this.spin = new Spinner(opts).spin(this.$element[0]);
+    },
+    destroy: function() {
+        if (this.spin)
+            this.spin.stop();
+        this._super();
+    },
+});
+instance.web.Throbber.throbbers = [];
+
 instance.web.blockUI = function() {
     var tmp = $.blockUI.apply($, arguments);
-    var target = $(".oe_blockui_spin")[0];
-    var opts = {
-      lines: 13, // The number of lines to draw
-      length: 7, // The length of each line
-      width: 4, // The line thickness
-      radius: 10, // The radius of the inner circle
-      rotate: 0, // The rotation offset
-      color: '#FFF', // #rgb or #rrggbb
-      speed: 1, // Rounds per second
-      trail: 60, // Afterglow percentage
-      shadow: false, // Whether to render a shadow
-      hwaccel: false, // Whether to use hardware acceleration
-      className: 'spinner', // The CSS class to assign to the spinner
-      zIndex: 2e9, // The z-index (defaults to 2000000000)
-      top: 'auto', // Top position relative to parent in px
-      left: 'auto' // Left position relative to parent in px
-    };
-    var spinner = new Spinner(opts).spin(target);
-    $.blockUI.spinners.push(spinner);
+    var throbber = new instance.web.Throbber();
+    instance.web.Throbber.throbbers.push(throbber);
+    throbber.appendTo($(".oe_blockui_spin_container"));
     return tmp;
 }
 instance.web.unblockUI = function() {
-    _.each($.blockUI.spinners, function(el) {
-        el.stop();
+    _.each(instance.web.Throbber.throbbers, function(el) {
+        el.destroy();
     });
     return $.unblockUI.apply($, arguments);
 }
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 9b22a7c7ff7..ee5183d8e5c 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1736,5 +1736,12 @@
 <div t-name="Many2ManyKanban.quick_create" class="oe_kanban_quick_create">
     <input t-att-placeholder="_t('Type name to search')"/>
 </div>
-
+<t t-name="Throbber">
+    <div>
+        <div class="oe_blockui_spin" style="height: 50px">
+        </div>
+        <br />
+        <div style="color:white">Loading...</div>
+    </div>
+</t>
 </templates>