Adding loading gif to shop page

app/assets/stylesheets/darkswarm/shop.css.sass

@@ -10,17 +10,14 @@
 @import shop-taxon-flag
 @import shop-popovers
 
-
-
 .darkswarm
 
   products
     display: block
     padding-top: 2.3em
-    
     @media all and (max-width: 768px)
       padding-top: 1em
-      
+
       input.button.right
         float: left
 
@@ -28,7 +25,6 @@
       .add_to_cart
         margin-top: 2rem
 
-
     product
       @include csstrans
       border-bottom: 1px solid #e5e5e5
@@ -55,12 +51,14 @@
       .inline
         display: inline
 
-      
+      .spinner
+        width: 100px
+
       // ICONS
       i
         font-size: 0.75em
         padding-right: 0.9375rem
-        @media all and (max-width: 640px) 
+        @media all and (max-width: 640px)
           padding-right: 0.25rem
 
       i.ofn-i_056-bulk, i.ofn-i_036-producers
@@ -69,20 +67,3 @@
 
       i.ofn-i_036-producers
         padding-left: 0.5rem
-
-      
-
-
-
-
-      
-
-      
-
-        
-      
-
-
-
-
-

app/views/shop/products/_form.html.haml

@@ -3,7 +3,7 @@
 
   .row
     .small-12.medium-8.large-9.columns
-      %input#search.text{"ng-model" => "query", 
+      %input#search.text{"ng-model" => "query",
       placeholder: "Search by product or producer",
       "ng-debounce" => "100",
       "ofn-disable-enter" => true}
@@ -22,11 +22,14 @@
       = render partial: "shop/products/summary"
       %shop-variant{variant: 'product.master', "bo-if" => "!product.hasVariants"}
       %shop-variant{variant: 'variant', "ng-repeat" => "variant in product.variants track by variant.id"}
-    
+
     %product{"ng-show" => "Products.loading"}
       .row.summary
         .small-12.columns.text-center
           Loading products
+      .row
+        .small-12.columns.text-center
+          %img.spinner{ src: "/assets/loading.gif" }
 
     %div{"ng-show" => "filteredProducts.length == 0 && !Products.loading"}
       .row.summary