Adds a loading image in the search page

magento · Sep 13, 2016 · 289e31f · 289e31f
1 parent c5420a1
commit 289e31f
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 5 deletions.
diff --git a/css/app.css b/css/app.css
diff --git a/i/loading.gif b/i/loading.gif
diff --git a/scss/partials/_search.scss b/scss/partials/_search.scss
@@ -1,5 +1,11 @@
-#search-results table {
-    border: none;
+#search-results {
+    min-height: 400px;
+    &.loading {
+        background: url(../i/loading.gif) no-repeat center center;
+    }
+    table{
+        border: none;
+    }
 }
 
 .search .content {
@@ -406,3 +412,4 @@ body.search-active {
     z-index: 50;
     cursor: pointer;
 }
+
diff --git a/search.md b/search.md
@@ -5,7 +5,7 @@ subgroup:
 title: Search Results
 menu_title: Search
 ---
-<div id="search-results">
+<div id="search-results" class="loading">
     <!--Google Custom Search-->
     <script>
         (function() {
@@ -16,6 +16,7 @@ menu_title: Search
             gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
             var s = document.getElementsByTagName('script')[0];
             s.parentNode.insertBefore(gcse, s);
+            $("#search-results").removeClass("loading");
             })();
     </script>
     <gcse:search></gcse:search>