6 files changed, 86 insertions, 4 deletions

diff --git a/askbot/media/images/ajax-loader.gif b/askbot/media/images/ajax-loader.gif
new file mode 100644
index 00000000..212a8197
--- /dev/null
+++ b/askbot/media/images/ajax-loader.gif
diff --git a/askbot/media/js/live_search.js b/askbot/media/js/live_search.js
index ef1b6e43..97b13e31 100644
--- a/askbot/media/js/live_search.js
+++ b/askbot/media/js/live_search.js
@@ -130,6 +130,19 @@ SearchDropMenu.prototype.makeKeyHandler = function() {
     };
 };
 
+/** todo: change this to state management as >1 thing happens */
+SearchDropMenu.prototype.showWaitIcon = function() {
+    this._waitIcon.show();
+    this._footer.hide();
+    this._element.addClass('empty');
+};
+
+SearchDropMenu.prototype.hideWaitIcon = function() {
+    this._waitIcon.hide();
+    this._footer.show();
+    this._element.removeClass('empty');
+};
+
 SearchDropMenu.prototype.createDom = function() {
     this._element = this.makeElement('div');
     this._element.addClass('search-drop-menu');
@@ -139,6 +152,11 @@ SearchDropMenu.prototype.createDom = function() {
     this._element.append(this._resultsList);
     this._element.addClass('empty');
 
+    var waitIcon = new WaitIcon();
+    waitIcon.hide();
+    this._element.append(waitIcon.getElement());
+    this._waitIcon = waitIcon;
+
     //add ask button, @todo: make into separate class?
     var footer = this.makeElement('div');
     this._element.append(footer);
@@ -471,6 +489,7 @@ FullTextSearch.prototype.getSearchQuery = function() {
  */
 FullTextSearch.prototype.renderTitleSearchResult = function(data) {
     var menu = this._dropMenu;
+    menu.hideWaitIcon();
     menu.setData(data);
     menu.render();
     menu.show();
@@ -741,6 +760,8 @@ FullTextSearch.prototype.makeKeyDownHandler = function() {
         if (query.length === 0) {
             if (keyCode !== 8 && keyCode !== 48) {//del and backspace
                 toolTip.hide();
+                dropMenu.show();
+                dropMenu.showWaitIcon();
                 //xButton.show();//causes a jump of search input...
             }
         } else {
diff --git a/askbot/media/js/post.js b/askbot/media/js/post.js
index 05e49387..6bc37600 100644
--- a/askbot/media/js/post.js
+++ b/askbot/media/js/post.js
@@ -23,6 +23,7 @@ var lanai = {
     }
 };
 
+//todo: clean-up now there is utils:WaitIcon
 function appendLoader(element) {
     loading = gettext('loading...')
     element.append('<img class="ajax-loader" ' +
diff --git a/askbot/media/js/utils.js b/askbot/media/js/utils.js
index cf748ee6..e9ae4dd2 100644
--- a/askbot/media/js/utils.js
+++ b/askbot/media/js/utils.js
@@ -382,6 +382,45 @@ WrappedElement.prototype.dispose = function(){
     this._in_document = false;
 };
 
+/** 
+ * @constructor
+ * a loader
+ */
+var WaitIcon = function() {
+    WrappedElement.call(this);
+    this._isVisible = false;
+};
+inherits(WaitIcon, WrappedElement);
+
+WaitIcon.prototype.setVisible = function(isVisible) {
+    this._isVisible = isVisible;
+    if (this._element) {
+        if (this._isVisible === true) {
+            this._element.show();
+        } else {
+            this._element.hide();
+        }
+    }
+};
+
+WaitIcon.prototype.hide = function() {
+    this.setVisible(false);
+};
+
+WaitIcon.prototype.show = function() {
+    this.setVisible(true);
+};
+
+WaitIcon.prototype.createDom = function() {
+    var box = this.makeElement('div');
+    box.addClass('wait-icon-box');
+    this._element = box;
+    var img = this.makeElement('img');
+    img.attr('src', mediaUrl('media/images/ajax-loader.gif'));
+    box.append(img);
+    this.setVisible(this._isVisible); 
+};
+
 /**
  * @contsructor
  * a form helper that disables submit button
diff --git a/askbot/media/style/style.css b/askbot/media/style/style.css
index 249b01b5..b23526f5 100644
--- a/askbot/media/style/style.css
+++ b/askbot/media/style/style.css
@@ -211,6 +211,9 @@ body.user-messages {
   font-size: 16px;
   color: #424242;
 }
+.wait-icon-box {
+  text-align: center;
+}
 #closeNotify {
   position: absolute;
   right: 5px;
@@ -490,13 +493,19 @@ body.user-messages {
   color: whitesmoke;
 }
 .search-drop-menu ul.empty {
-  padding: 5px;
-  margin: 0;
+  margin-bottom: 0;
 }
 .search-drop-menu .footer {
   text-align: center;
   padding-bottom: 10px;
 }
+.search-drop-menu.empty {
+  padding-bottom: 8px;
+}
+.search-drop-menu.empty ul {
+  padding: 5px;
+  margin: 0;
+}
 .input-tool-tip {
   color: #999;
 }
diff --git a/askbot/media/style/style.less b/askbot/media/style/style.less
index 104e499e..905fdbfd 100644
--- a/askbot/media/style/style.less
+++ b/askbot/media/style/style.less
@@ -205,6 +205,10 @@ body.user-messages {
     }
 }
 
+.wait-icon-box {
+    text-align: center;
+}
+
 #closeNotify {
     position: absolute;
     right: 5px;
@@ -518,8 +522,7 @@ body.user-messages {
     }
 
     ul.empty {
-        padding: 5px;
-        margin: 0;
+        margin-bottom: 0;
     }
 
     .footer {
@@ -528,6 +531,15 @@ body.user-messages {
     }
 }
 
+.search-drop-menu.empty {
+    padding-bottom: 8px;
+    ul {
+        padding: 5px;
+        margin: 0;
+    }
+}
+
+
 .input-tool-tip {
     color: #999;
 }