replace code by reusable component

app/views/admin/customers/index.html.haml

@@ -35,7 +35,7 @@
 
   .row{ 'ng-if' => 'shop_id && RequestMonitor.loading' }
     .sixteen.columns.alpha#loading
-      %img.spinner{ src: image_path("spinning-circles.svg") }
+      = render partial: "components/loading"
       %h1
         =t :loading_customers
 

app/views/admin/enterprises/_enterprise_user_index.html.haml

@@ -9,7 +9,7 @@
       %columns-dropdown{ action: "#{controller_name}_#{action_name}" }
   .row{ 'ng-if' => '!loaded' }
     .sixteen.columns.alpha#loading
-      %img.spinner{ src: image_path("spinning-circles.svg") }
+      = render partial: "components/loading"
       %h1= t('.loading_enterprises')
   .row{ :class => "sixteen columns alpha", 'ng-show' => 'loaded && filteredEnterprises.length == 0'}
     %h1#no_results= t('.no_enterprises_found')

app/views/admin/order_cycles/_loading_flash.html.haml

@@ -1,5 +1,5 @@
 %div.sixteen.columns.alpha.omega#loading{ ng: { cloak: true, if: 'RequestMonitor.loading' } }
-  %img.spinner{ src: image_path("spinning-circles.svg") }
+  = render partial: "components/loading"
   %h1{ ng: { hide: 'orderCycles.length > 0' } }
     =t('.loading_order_cycles')
   %h1{ ng: { show: 'orderCycles.length > 0' } }

app/views/admin/subscriptions/_loading_flash.html.haml

@@ -1,3 +1,3 @@
 %div.sixteen.columns.alpha.omega#loading{ ng: { cloak: true, if: 'shop_id && RequestMonitor.loading' } }
-  %img.spinner{ src: image_path("spinning-circles.svg") }
+  = render partial: "components/loading"
   %h1= t('.loading')

app/views/admin/variant_overrides/_loading_flash.html.haml

@@ -1,3 +1,3 @@
 %div.sixteen.columns.alpha.omega#loading{ ng: { cloak: true, if: 'hub_id && products.length == 0 && RequestMonitor.loading' } }
-  %img.spinner{ src: image_path("spinning-circles.svg") }
+  = render partial: "components/loading"
   %h1= t('.loading_inventory')

app/views/registration/steps/_logo.html.haml

@@ -41,6 +41,6 @@
               .message{ ng: { hide: "imageSrc() || imageUploader.isUploading" } }
                 = t(".logo_placeholder")
               .loading{ ng: { hide: "!imageUploader.isUploading" } }
-                %img.spinner{ src: image_path("spinning-circles.svg") }
+                = render partial: "components/loading"
                 %br/
                 = t("registration.steps.images.uploading")

app/views/registration/steps/_promo.html.haml

@@ -39,6 +39,6 @@
               .message{ ng: { hide: "imageSrc() || imageUploader.isUploading" } }
                 = t(".promo_image_placeholder")
               .loading{ ng: { hide: "!imageUploader.isUploading" } }
-                %img.spinner{ src: image_path("spinning-circles.svg") }
+                = render partial: "components/loading"
                 %br/
                 = t("registration.steps.images.uploading")

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

@@ -21,7 +21,7 @@
                     = t :products_loading
                 .row.full
                   .small-12.columns.text-center
-                    %img.spinner{ src: image_path("spinning-circles.svg") }
+                    = render partial: "components/loading"
 
           .hide-for-medium-down.large-1.columns
             -# Space between products and filters

app/views/spree/admin/orders/bulk_management.html.haml

@@ -103,7 +103,7 @@
     %columns-dropdown{ action: "#{controller_name}_#{action_name}" }
 
   %div.sixteen.columns.alpha#loading{ 'ng-if' => 'RequestMonitor.loading' }
-    %img.spinner{ src: image_path("spinning-circles.svg") }
+    = render partial: "components/loading"
     %h1
       = t("admin.orders.bulk_management.loading")
 

app/views/spree/admin/orders/index.html.haml

@@ -93,7 +93,7 @@
 .orders-loading{'ng-show' => 'RequestMonitor.loading'}
   .row
     .small-12.columns.fullwidth.text-center
-      %img.spinner{ src: image_path("spinning-circles.svg") }
+      = render partial: "components/loading"
   .row
     .small-12.columns.fullwidth.text-center
       %span= t('.loading')

app/views/spree/admin/products/index/_indicators.html.haml

@@ -1,6 +1,6 @@
 %div.sixteen.columns.alpha#loading{ 'ng-if' => 'RequestMonitor.loading' }
   %br
-  %img.spinner{ src: image_path("spinning-circles.svg") }
+  = render partial: "components/loading"  
   %h1= t('.title')
 
 %div.sixteen.columns.alpha{ 'ng-show' => '!RequestMonitor.loading && products.length == 0 && q.query.length == 0' }