Add a loading indicator to install theme/plugin screen

modules/system/assets/css/updates/install.css

@@ -7,6 +7,7 @@
   margin: 0;
   padding: 10px 0;
   overflow: hidden;
+  /* clearfix */
 }
 .product-list li button {
   position: absolute;
@@ -38,9 +39,6 @@
   padding-bottom: 10px;
   overflow: hidden;
 }
-.plugin-list li:last-child {
-  border-bottom: none;
-}
 .plugin-list li .image {
   float: left;
   margin-right: 15px;
@@ -61,6 +59,9 @@
   color: #C03F31;
   font-weight: 400;
 }
+.plugin-list li:last-child {
+  border-bottom: none;
+}
 .theme-list li {
   float: left;
   padding: 0;
@@ -70,11 +71,6 @@
   background: #fff;
   position: relative;
   border-radius: 3px;
-}
-.theme-list li:hover {
-  border-color: transparent;
-}
-.theme-list li {
   -webkit-transition: border .2s linear;
   -moz-transition: border .2s linear;
   transition: border .2s linear;
@@ -86,9 +82,6 @@
   width: 210px;
   height: 140px;
 }
-.theme-list li:hover .image {
-  opacity: 0;
-}
 .theme-list li .details {
   position: absolute;
   bottom: 0;
@@ -97,9 +90,6 @@
   padding: 10px;
   overflow: hidden;
 }
-.theme-list li:hover .details {
-  opacity: 1;
-}
 .theme-list li h4 {
   padding: 15px 0 0;
   margin: 0;
@@ -111,32 +101,34 @@
   text-transform: uppercase;
   font-size: 12px;
 }
+.theme-list li:hover {
+  border-color: transparent;
+}
+.theme-list li:hover .image {
+  opacity: 0;
+}
+.theme-list li:hover .details {
+  opacity: 1;
+}
 .suggested-products {
   padding: 0;
 }
 .suggested-products .product {
   padding: 0;
 }
+.suggested-products .image {
+  float: left;
+  position: relative;
+}
 .suggested-products .image img {
   width: 40px;
   height: 40px;
   margin-top: 10px;
 }
-.suggested-themes .image img {
-  width: 60px;
-  height: 40px;
-}
-.suggested-products .image {
-  float: left;
-  position: relative;
-}
 .suggested-products .details {
   margin-left: 50px;
   padding: 10px 0;
 }
-.suggested-themes .details {
-  margin-left: 70px;
-}
 .suggested-products .details h5 {
   margin: 0 0 3px;
   font-size: 14px;
@@ -175,6 +167,13 @@
 .suggested-products a:hover .image img {
   opacity: .5;
 }
+.suggested-themes .image img {
+  width: 60px;
+  height: 40px;
+}
+.suggested-themes .details {
+  margin-left: 70px;
+}
 /*!
  * Typeahead
  */
@@ -185,6 +184,24 @@
   text-align: left;
   padding-bottom: 15px;
 }
+.product-search > i.icon {
+  position: absolute;
+  top: 50%;
+  right: 15px;
+  font-size: 24px;
+  margin-top: -20px;
+  color: rgba(0, 0, 0, 0.35);
+}
+.product-search > i.icon.loading {
+  display: block;
+  width: 24px;
+  height: 24px;
+  background-image: url(../../../../backend/assets/images/loading-indicator-transparent.svg);
+  background-size: 24px 24px;
+  background-position: 50% 50%;
+  -webkit-animation: spin 1s linear infinite;
+  animation: spin 1s linear infinite;
+}
 .twitter-typeahead {
   width: 100%;
 }

modules/system/assets/js/updates/install.js

@@ -53,7 +53,21 @@
         var engine = new Bloodhound({
             name: 'products',
             method: 'POST',
-            remote: window.location.pathname + '?search=' + searchType + '&query=%QUERY',
+            remote: {
+                url: window.location.pathname + '?search=' + searchType + '&query=%QUERY',
+                ajax: {
+                    beforeSend: function() {
+                        $('.icon', $form).hide()
+                        $('.icon.loading', $form).show()
+                        $el.data('searchReady', false)
+                    },
+                    complete: function() {
+                        $('.icon', $form).show()
+                        $('.icon.loading', $form).hide()
+                        $el.data('searchReady', true)
+                    }
+                }
+            },
             datumTokenizer: function(d) {
                 return Bloodhound.tokenizers.whitespace(d.val)
             },
@@ -92,6 +106,9 @@
             $el = $(el),
             $input = $el.find('.product-search-input.tt-input:first')
 
+        if (!$input.data('searchReady'))
+            return
+
         $el.popup()
 
         $input.typeahead('val', '')

modules/system/assets/less/updates/install.less

@@ -205,6 +205,25 @@
     margin: 0 auto 0 auto;
     text-align: left;
     padding-bottom: 15px;
+
+    > i.icon {
+        position: absolute;
+        top: 50%;
+        right: 15px;
+        font-size: 24px;
+        margin-top: -20px;
+        color: rgba(0,0,0,.35);
+    }
+
+    > i.icon.loading {
+        display: block;
+        width: 24px;
+        height: 24px;
+        background-image: url(../../../../backend/assets/images/loading-indicator-transparent.svg);
+        background-size: 24px 24px;
+        background-position: 50% 50%;
+        .animation(spin 1s linear infinite);
+    }
 }
 .twitter-typeahead {
     width: 100%;
@@ -247,11 +266,9 @@
 .tt-suggestion {
     font-size: 14px;
     line-height: 18px;
-    + {
-        .tt-suggestion {
-            font-size: 14px;
-            border-top: 1px solid #ccc;
-        }
+    + .tt-suggestion {
+        font-size: 14px;
+        border-top: 1px solid #ccc;
     }
 }
 .tt-suggestions {

modules/system/controllers/updates/_install_plugins.htm

@@ -14,6 +14,8 @@
                 placeholder="search plugins to install..."
                 data-search-type="plugins"
                 />
+            <i class="icon icon-search"></i>
+            <i class="icon loading" style="display: none"></i>
         </div>
     </form>
 

modules/system/controllers/updates/_install_themes.htm

@@ -14,6 +14,8 @@
                 placeholder="search themes to install..."
                 data-search-type="themes"
                 />
+            <i class="icon icon-search"></i>
+            <i class="icon loading" style="display: none"></i>
         </div>
     </form>