Hide and show search loader using jquery

aleksis/core/static/js/search.js

@@ -13,7 +13,7 @@ var Autocomplete = function (options) {
     this.form_elem = null;
     this.query_box = null;
     this.selected_element = null;
-    this.loader_shown = false;
+    this.loader = $("#search-loader");
 };
 
 Autocomplete.prototype.setup = function () {
@@ -133,18 +133,10 @@ Autocomplete.prototype.setSelectedResult = function (element) {
 Autocomplete.prototype.setLoader = function (value) {
     var self = this;
     if (typeof value === "boolean"){
-        if (self.loader_shown === value) {
-            return
+        if (value) {
+            self.loader.show();
         } else {
-            self.loader_shown = value
-
-            if (!value) {
-                $("#search-loader").remove();
-            } else {
-                this.query_box.after(
-                    $('<div class="progress" id="search-loader"><div class="indeterminate"></div></div>')
-                );
-            }
+            self.loader.hide();
         }
     }
 }

aleksis/core/templates/core/base.html

@@ -84,6 +84,7 @@
             <button class="btn btn-flat search-button" type="submit" aria-label="{% trans "Search" %}">
               <i class="material-icons">search</i>
             </button>
+            <div class="progress" style="display: none;" id="search-loader"><div class="indeterminate"></div></div>
           </div>
         </form>
       </li>