From 776a61d1d9a781d64bac013fad02d5b9e9334a39 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Mon, 11 Jan 2021 11:17:33 +0100
Subject: [PATCH 01/10] create loading spinner reusable component

---
 app/views/components/_loading.html.haml | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 app/views/components/_loading.html.haml

diff --git a/app/views/components/_loading.html.haml b/app/views/components/_loading.html.haml
new file mode 100644
index 0000000000..606dbd051a
--- /dev/null
+++ b/app/views/components/_loading.html.haml
@@ -0,0 +1 @@
+%img.spinner{ src: image_path("spinning-circles.svg") }

From b02b36b8e83dcbab8fe86bede4f38c447a3d471f Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Mon, 11 Jan 2021 11:18:34 +0100
Subject: [PATCH 02/10] replace code by reusable component

---
 app/views/admin/customers/index.html.haml                    | 2 +-
 app/views/admin/enterprises/_enterprise_user_index.html.haml | 2 +-
 app/views/admin/order_cycles/_loading_flash.html.haml        | 2 +-
 app/views/admin/subscriptions/_loading_flash.html.haml       | 2 +-
 app/views/admin/variant_overrides/_loading_flash.html.haml   | 2 +-
 app/views/registration/steps/_logo.html.haml                 | 2 +-
 app/views/registration/steps/_promo.html.haml                | 2 +-
 app/views/shop/products/_form.html.haml                      | 2 +-
 app/views/spree/admin/orders/bulk_management.html.haml       | 2 +-
 app/views/spree/admin/orders/index.html.haml                 | 2 +-
 app/views/spree/admin/products/index/_indicators.html.haml   | 2 +-
 11 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/app/views/admin/customers/index.html.haml b/app/views/admin/customers/index.html.haml
index 2ee8bc16a3..456f439f6c 100644
--- a/app/views/admin/customers/index.html.haml
+++ b/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
 
diff --git a/app/views/admin/enterprises/_enterprise_user_index.html.haml b/app/views/admin/enterprises/_enterprise_user_index.html.haml
index eedfba8d34..a17baa3ba7 100644
--- a/app/views/admin/enterprises/_enterprise_user_index.html.haml
+++ b/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')
diff --git a/app/views/admin/order_cycles/_loading_flash.html.haml b/app/views/admin/order_cycles/_loading_flash.html.haml
index 05aff6b748..d7f1a5071a 100644
--- a/app/views/admin/order_cycles/_loading_flash.html.haml
+++ b/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' } }
diff --git a/app/views/admin/subscriptions/_loading_flash.html.haml b/app/views/admin/subscriptions/_loading_flash.html.haml
index ab37f06a71..7d78d296dc 100644
--- a/app/views/admin/subscriptions/_loading_flash.html.haml
+++ b/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')
diff --git a/app/views/admin/variant_overrides/_loading_flash.html.haml b/app/views/admin/variant_overrides/_loading_flash.html.haml
index d9b2bf46bc..0e60423659 100644
--- a/app/views/admin/variant_overrides/_loading_flash.html.haml
+++ b/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')
diff --git a/app/views/registration/steps/_logo.html.haml b/app/views/registration/steps/_logo.html.haml
index 4082defaec..4a01d5a0a4 100644
--- a/app/views/registration/steps/_logo.html.haml
+++ b/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")
diff --git a/app/views/registration/steps/_promo.html.haml b/app/views/registration/steps/_promo.html.haml
index efe29f6994..3934c12d48 100644
--- a/app/views/registration/steps/_promo.html.haml
+++ b/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")
diff --git a/app/views/shop/products/_form.html.haml b/app/views/shop/products/_form.html.haml
index 9506cd4bcd..8b0ab92482 100644
--- a/app/views/shop/products/_form.html.haml
+++ b/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
diff --git a/app/views/spree/admin/orders/bulk_management.html.haml b/app/views/spree/admin/orders/bulk_management.html.haml
index 9949b4495c..06335b73ff 100644
--- a/app/views/spree/admin/orders/bulk_management.html.haml
+++ b/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")
 
diff --git a/app/views/spree/admin/orders/index.html.haml b/app/views/spree/admin/orders/index.html.haml
index d2871fe540..a8c66a999d 100644
--- a/app/views/spree/admin/orders/index.html.haml
+++ b/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')
diff --git a/app/views/spree/admin/products/index/_indicators.html.haml b/app/views/spree/admin/products/index/_indicators.html.haml
index 9c002b1f1f..ad7e67bbe5 100644
--- a/app/views/spree/admin/products/index/_indicators.html.haml
+++ b/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' }

From 4d953abbe921ed2a7949de7c787497ea613af802 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Mon, 11 Jan 2021 11:18:54 +0100
Subject: [PATCH 03/10] replace code by reusable component

in a js file
---
 .../admin/panels/exchange_products_panel_footer.html.haml       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/templates/admin/panels/exchange_products_panel_footer.html.haml b/app/assets/javascripts/templates/admin/panels/exchange_products_panel_footer.html.haml
index 7db48a869a..5a4ed58fdc 100644
--- a/app/assets/javascripts/templates/admin/panels/exchange_products_panel_footer.html.haml
+++ b/app/assets/javascripts/templates/admin/panels/exchange_products_panel_footer.html.haml
@@ -6,6 +6,6 @@
 
 .sixteen.columns.alpha#loading{ 'ng-show' => 'productsLoading()' }
   %br
-  %img.spinner{ src: "/assets/spinning-circles.svg" }
+  {{ = render partial: "components/loading" }}
   %h1
     {{ 'js.admin.panels.exchange_products.loading_variants' | t }}

From 6f24ecd9732007f9c489fac5fd59cb15f1601e24 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Mon, 11 Jan 2021 11:20:00 +0100
Subject: [PATCH 04/10] replace code by reusable component

There is no need to add .text-center as it's already on the parent component
---
 app/views/producers/_fat.html.haml | 2 +-
 app/views/shops/_fat.html.haml     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/views/producers/_fat.html.haml b/app/views/producers/_fat.html.haml
index 227e5dca39..c514271a1a 100644
--- a/app/views/producers/_fat.html.haml
+++ b/app/views/producers/_fat.html.haml
@@ -1,7 +1,7 @@
 .row.active_table_row{"ng-if" => "open()", "ng-click" => "toggle($event)", "ng-class" => "{'open' : open()}"}
   .columns.small-12.fat.text-center{"ng-show" => "open() && shopfront_loading"}
     %p.fullwidth
-      %img.spinner.text-center{ src: image_path("spinning-circles.svg") }
+      = render partial: "components/loading"
 
   .columns.small-12.medium-7.large-7.fat{"ng-show" => "open() && !shopfront_loading"}
     / Will add in long description available once clean up HTML formatting producer.long_description
diff --git a/app/views/shops/_fat.html.haml b/app/views/shops/_fat.html.haml
index 289b1d3dc0..8b56a4a0cd 100644
--- a/app/views/shops/_fat.html.haml
+++ b/app/views/shops/_fat.html.haml
@@ -1,7 +1,7 @@
 .row.active_table_row{"ng-show" => "open()", "ng-click" => "toggle($event)", "ng-class" => "{'open' : open()}"}
   .columns.small-12.fat.text-center{"ng-show" => "open() && shopfront_loading"}
     %p.fullwidth
-      %img.spinner.text-center{ src: image_path("spinning-circles.svg") }
+      = render partial: "components/loading"
 
   .columns.small-12.medium-6.large-5.fat{"ng-show" => "open() && !shopfront_loading"}
     %div{"ng-if" => "::hub.taxons"}

From 1b4254a5cff6452b14803ff03c69e95ac5001344 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Mon, 11 Jan 2021 16:12:17 +0100
Subject: [PATCH 05/10] Revert "replace code by reusable component"

This reverts commit 4d953abbe921ed2a7949de7c787497ea613af802.
---
 .../admin/panels/exchange_products_panel_footer.html.haml       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/templates/admin/panels/exchange_products_panel_footer.html.haml b/app/assets/javascripts/templates/admin/panels/exchange_products_panel_footer.html.haml
index 5a4ed58fdc..7db48a869a 100644
--- a/app/assets/javascripts/templates/admin/panels/exchange_products_panel_footer.html.haml
+++ b/app/assets/javascripts/templates/admin/panels/exchange_products_panel_footer.html.haml
@@ -6,6 +6,6 @@
 
 .sixteen.columns.alpha#loading{ 'ng-show' => 'productsLoading()' }
   %br
-  {{ = render partial: "components/loading" }}
+  %img.spinner{ src: "/assets/spinning-circles.svg" }
   %h1
     {{ 'js.admin.panels.exchange_products.loading_variants' | t }}

From 544a7407e3c834e9deff4d21c1498113aa3e6b5e Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Mon, 11 Jan 2021 16:22:47 +0100
Subject: [PATCH 06/10] specify max-width to not overflow parent element

---
 app/views/components/_loading.html.haml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/components/_loading.html.haml b/app/views/components/_loading.html.haml
index 606dbd051a..8d0a371204 100644
--- a/app/views/components/_loading.html.haml
+++ b/app/views/components/_loading.html.haml
@@ -1 +1 @@
-%img.spinner{ src: image_path("spinning-circles.svg") }
+%img.spinner{ src: image_path("spinning-circles.svg"), style: "max-width: 100%" }

From e34050f7cb9f3e7aa67c4e4f1ff15c8af9a5973a Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Mon, 11 Jan 2021 16:23:22 +0100
Subject: [PATCH 07/10] add wrapper to show/hide loading spinner

---
 .../javascripts/templates/admin/modals/image_upload.html.haml  | 3 ++-
 app/views/admin/enterprises/form/_primary_details.html.haml    | 3 ++-
 app/views/shops/_hubs.html.haml                                | 3 ++-
 app/views/spree/admin/orders/index.html.haml                   | 3 ++-
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/templates/admin/modals/image_upload.html.haml b/app/assets/javascripts/templates/admin/modals/image_upload.html.haml
index f864bbee5f..aebdfe94ff 100644
--- a/app/assets/javascripts/templates/admin/modals/image_upload.html.haml
+++ b/app/assets/javascripts/templates/admin/modals/image_upload.html.haml
@@ -3,7 +3,8 @@
 
 %form#image_upload{ name: 'form', novalidate: true, enctype: 'multipart/form-data', multipart: true, ng: { controller: "ProductImageCtrl" } }
   %div.image-preview
-    %img.spinner{ src: "/assets/spinning-circles.svg", ng: { hide: "!imageUploader.isUploading" }}
+    %div{ng: {hide: "!imageUploader.isUploading", cloak: true}}
+      %ng-include{src: "'components/loading'"}
     %img.preview{ng: {src: "{{imagePreview}}", class: "{'faded': imageUploader.isUploading}"}}
 
   %label{for: 'image-upload', class: 'button'} {{ 'admin.products.index.upload_an_image' | t }}
diff --git a/app/views/admin/enterprises/form/_primary_details.html.haml b/app/views/admin/enterprises/form/_primary_details.html.haml
index a6a09106b3..f948de45b3 100644
--- a/app/views/admin/enterprises/form/_primary_details.html.haml
+++ b/app/views/admin/enterprises/form/_primary_details.html.haml
@@ -59,7 +59,8 @@
     .six.columns
       = f.text_field :permalink, { 'ng-model' => "Enterprise.permalink", placeholder: "eg. your-shop-name", 'ng-model-options' => "{ updateOn: 'default blur', debounce: {'default': 300, 'blur': 0} }" }
     .two.columns.omega
-      %img.spinner{ src: image_path("spinning-circles.svg"), width: "30px", ng: { show: "checking" } }
+      %div{ng: {show: "checking", cloak: true}, style: "width: 30px; height: 30px;"}
+        = render partial: "components/loading"
       %span{ ng: { class: 'availability.toLowerCase()', hide: "checking" } }
         {{ availability }}
         %i{ ng: { class: "{'icon-ok-sign': availability == 'Available', 'icon-remove-sign': availability == 'Unavailable'}" } }
diff --git a/app/views/shops/_hubs.html.haml b/app/views/shops/_hubs.html.haml
index 1d19839a03..b9faf935dd 100644
--- a/app/views/shops/_hubs.html.haml
+++ b/app/views/shops/_hubs.html.haml
@@ -26,7 +26,8 @@
         %a{href: "", "ng-click" => "showDistanceMatches()"}
           = t :hubs_distance_filter, location: "{{ nameMatchesFiltered[0].name }}"
   .more-controls
-    %img.spinner.text-center{ng: {show: "closed_shops_loading"}, src: image_path("spinning-circles.svg") }
+    %span{ng: {show: "closed_shops_loading", cloak: true}}
+      = render partial: "components/loading"
     %span{ng: {if: "!show_closed", cloak: true}}
       %a.button{href: "", ng: {click: "showClosedShops()"}}
         = t '.show_closed_shops'
diff --git a/app/views/spree/admin/orders/index.html.haml b/app/views/spree/admin/orders/index.html.haml
index a8c66a999d..d6629f0a3a 100644
--- a/app/views/spree/admin/orders/index.html.haml
+++ b/app/views/spree/admin/orders/index.html.haml
@@ -81,7 +81,8 @@
         %span{'ng-bind-html' => 'order.display_total'}
       %td.actions
         %div.row-loading-icons
-          %img.spinner{src: image_path("spinning-circles.svg"), ng: {show: 'rowStatus[order.id] == "loading"'} }
+          %span{ng: {show: 'rowStatus[order.id] == "loading"', cloak: true}}
+            = render partial: "components/loading"
           %i.success.icon-ok-sign{ng: {show: 'rowStatus[order.id] == "success"'} }
           %i.error.icon-remove-sign.with-tip{ng: {show: 'rowStatus[order.id] == "error"'}, 'ofn-with-tip' => t('.order_not_updated')}
         %a.icon_link.with-tip.icon-edit.no-text{'ng-href' => '{{order.edit_path}}', 'data-action' => 'edit', 'ofn-with-tip' => t('.edit')}

From 71dc5a8ff014f189f70ba2cc36aea51ff2425774 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Mon, 11 Jan 2021 16:29:13 +0100
Subject: [PATCH 08/10] remove trailing space

---
 app/views/spree/admin/products/index/_indicators.html.haml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/spree/admin/products/index/_indicators.html.haml b/app/views/spree/admin/products/index/_indicators.html.haml
index ad7e67bbe5..233541910a 100644
--- a/app/views/spree/admin/products/index/_indicators.html.haml
+++ b/app/views/spree/admin/products/index/_indicators.html.haml
@@ -1,6 +1,6 @@
 %div.sixteen.columns.alpha#loading{ 'ng-if' => 'RequestMonitor.loading' }
   %br
-  = render partial: "components/loading"  
+  = render partial: "components/loading"
   %h1= t('.title')
 
 %div.sixteen.columns.alpha{ 'ng-show' => '!RequestMonitor.loading && products.length == 0 && q.query.length == 0' }

From 26edd83a54c6c450de90b3ba4e62def675757322 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Mon, 11 Jan 2021 16:33:44 +0100
Subject: [PATCH 09/10] do not include inside a javascript asset

I made a mistake by using it inside a javascript asset
revert part of commit e34050f7c
---
 .../javascripts/templates/admin/modals/image_upload.html.haml  | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/assets/javascripts/templates/admin/modals/image_upload.html.haml b/app/assets/javascripts/templates/admin/modals/image_upload.html.haml
index aebdfe94ff..f864bbee5f 100644
--- a/app/assets/javascripts/templates/admin/modals/image_upload.html.haml
+++ b/app/assets/javascripts/templates/admin/modals/image_upload.html.haml
@@ -3,8 +3,7 @@
 
 %form#image_upload{ name: 'form', novalidate: true, enctype: 'multipart/form-data', multipart: true, ng: { controller: "ProductImageCtrl" } }
   %div.image-preview
-    %div{ng: {hide: "!imageUploader.isUploading", cloak: true}}
-      %ng-include{src: "'components/loading'"}
+    %img.spinner{ src: "/assets/spinning-circles.svg", ng: { hide: "!imageUploader.isUploading" }}
     %img.preview{ng: {src: "{{imagePreview}}", class: "{'faded': imageUploader.isUploading}"}}
 
   %label{for: 'image-upload', class: 'button'} {{ 'admin.products.index.upload_an_image' | t }}

From 8399b82bfd1d1d9d13d77a5b405d5f9933050289 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Mon, 11 Jan 2021 16:49:56 +0100
Subject: [PATCH 10/10] rename component to spinner

A name for a "thing" rather a state
---
 app/views/admin/customers/index.html.haml                     | 2 +-
 app/views/admin/enterprises/_enterprise_user_index.html.haml  | 2 +-
 app/views/admin/enterprises/form/_primary_details.html.haml   | 2 +-
 app/views/admin/order_cycles/_loading_flash.html.haml         | 2 +-
 app/views/admin/subscriptions/_loading_flash.html.haml        | 2 +-
 app/views/admin/variant_overrides/_loading_flash.html.haml    | 2 +-
 .../components/{_loading.html.haml => _spinner.html.haml}     | 0
 app/views/producers/_fat.html.haml                            | 2 +-
 app/views/registration/steps/_logo.html.haml                  | 2 +-
 app/views/registration/steps/_promo.html.haml                 | 2 +-
 app/views/shop/products/_form.html.haml                       | 2 +-
 app/views/shops/_fat.html.haml                                | 2 +-
 app/views/shops/_hubs.html.haml                               | 2 +-
 app/views/spree/admin/orders/bulk_management.html.haml        | 2 +-
 app/views/spree/admin/orders/index.html.haml                  | 4 ++--
 app/views/spree/admin/products/index/_indicators.html.haml    | 2 +-
 16 files changed, 16 insertions(+), 16 deletions(-)
 rename app/views/components/{_loading.html.haml => _spinner.html.haml} (100%)

diff --git a/app/views/admin/customers/index.html.haml b/app/views/admin/customers/index.html.haml
index 456f439f6c..6653b9d386 100644
--- a/app/views/admin/customers/index.html.haml
+++ b/app/views/admin/customers/index.html.haml
@@ -35,7 +35,7 @@
 
   .row{ 'ng-if' => 'shop_id && RequestMonitor.loading' }
     .sixteen.columns.alpha#loading
-      = render partial: "components/loading"
+      = render partial: "components/spinner"
       %h1
         =t :loading_customers
 
diff --git a/app/views/admin/enterprises/_enterprise_user_index.html.haml b/app/views/admin/enterprises/_enterprise_user_index.html.haml
index a17baa3ba7..b8426b104b 100644
--- a/app/views/admin/enterprises/_enterprise_user_index.html.haml
+++ b/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
-      = render partial: "components/loading"
+      = render partial: "components/spinner"
       %h1= t('.loading_enterprises')
   .row{ :class => "sixteen columns alpha", 'ng-show' => 'loaded && filteredEnterprises.length == 0'}
     %h1#no_results= t('.no_enterprises_found')
diff --git a/app/views/admin/enterprises/form/_primary_details.html.haml b/app/views/admin/enterprises/form/_primary_details.html.haml
index f948de45b3..5fccc81904 100644
--- a/app/views/admin/enterprises/form/_primary_details.html.haml
+++ b/app/views/admin/enterprises/form/_primary_details.html.haml
@@ -60,7 +60,7 @@
       = f.text_field :permalink, { 'ng-model' => "Enterprise.permalink", placeholder: "eg. your-shop-name", 'ng-model-options' => "{ updateOn: 'default blur', debounce: {'default': 300, 'blur': 0} }" }
     .two.columns.omega
       %div{ng: {show: "checking", cloak: true}, style: "width: 30px; height: 30px;"}
-        = render partial: "components/loading"
+        = render partial: "components/spinner"
       %span{ ng: { class: 'availability.toLowerCase()', hide: "checking" } }
         {{ availability }}
         %i{ ng: { class: "{'icon-ok-sign': availability == 'Available', 'icon-remove-sign': availability == 'Unavailable'}" } }
diff --git a/app/views/admin/order_cycles/_loading_flash.html.haml b/app/views/admin/order_cycles/_loading_flash.html.haml
index d7f1a5071a..ffd05c59b1 100644
--- a/app/views/admin/order_cycles/_loading_flash.html.haml
+++ b/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' } }
-  = render partial: "components/loading"
+  = render partial: "components/spinner"
   %h1{ ng: { hide: 'orderCycles.length > 0' } }
     =t('.loading_order_cycles')
   %h1{ ng: { show: 'orderCycles.length > 0' } }
diff --git a/app/views/admin/subscriptions/_loading_flash.html.haml b/app/views/admin/subscriptions/_loading_flash.html.haml
index 7d78d296dc..130d92bb18 100644
--- a/app/views/admin/subscriptions/_loading_flash.html.haml
+++ b/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' } }
-  = render partial: "components/loading"
+  = render partial: "components/spinner"
   %h1= t('.loading')
diff --git a/app/views/admin/variant_overrides/_loading_flash.html.haml b/app/views/admin/variant_overrides/_loading_flash.html.haml
index 0e60423659..7832fd2160 100644
--- a/app/views/admin/variant_overrides/_loading_flash.html.haml
+++ b/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' } }
-  = render partial: "components/loading"
+  = render partial: "components/spinner"
   %h1= t('.loading_inventory')
diff --git a/app/views/components/_loading.html.haml b/app/views/components/_spinner.html.haml
similarity index 100%
rename from app/views/components/_loading.html.haml
rename to app/views/components/_spinner.html.haml
diff --git a/app/views/producers/_fat.html.haml b/app/views/producers/_fat.html.haml
index c514271a1a..02c9bf6fef 100644
--- a/app/views/producers/_fat.html.haml
+++ b/app/views/producers/_fat.html.haml
@@ -1,7 +1,7 @@
 .row.active_table_row{"ng-if" => "open()", "ng-click" => "toggle($event)", "ng-class" => "{'open' : open()}"}
   .columns.small-12.fat.text-center{"ng-show" => "open() && shopfront_loading"}
     %p.fullwidth
-      = render partial: "components/loading"
+      = render partial: "components/spinner"
 
   .columns.small-12.medium-7.large-7.fat{"ng-show" => "open() && !shopfront_loading"}
     / Will add in long description available once clean up HTML formatting producer.long_description
diff --git a/app/views/registration/steps/_logo.html.haml b/app/views/registration/steps/_logo.html.haml
index 4a01d5a0a4..06de18ff4d 100644
--- a/app/views/registration/steps/_logo.html.haml
+++ b/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" } }
-                = render partial: "components/loading"
+                = render partial: "components/spinner"
                 %br/
                 = t("registration.steps.images.uploading")
diff --git a/app/views/registration/steps/_promo.html.haml b/app/views/registration/steps/_promo.html.haml
index 3934c12d48..3a9d94db75 100644
--- a/app/views/registration/steps/_promo.html.haml
+++ b/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" } }
-                = render partial: "components/loading"
+                = render partial: "components/spinner"
                 %br/
                 = t("registration.steps.images.uploading")
diff --git a/app/views/shop/products/_form.html.haml b/app/views/shop/products/_form.html.haml
index 8b0ab92482..00255beefc 100644
--- a/app/views/shop/products/_form.html.haml
+++ b/app/views/shop/products/_form.html.haml
@@ -21,7 +21,7 @@
                     = t :products_loading
                 .row.full
                   .small-12.columns.text-center
-                    = render partial: "components/loading"
+                    = render partial: "components/spinner"
 
           .hide-for-medium-down.large-1.columns
             -# Space between products and filters
diff --git a/app/views/shops/_fat.html.haml b/app/views/shops/_fat.html.haml
index 8b56a4a0cd..a2522271ca 100644
--- a/app/views/shops/_fat.html.haml
+++ b/app/views/shops/_fat.html.haml
@@ -1,7 +1,7 @@
 .row.active_table_row{"ng-show" => "open()", "ng-click" => "toggle($event)", "ng-class" => "{'open' : open()}"}
   .columns.small-12.fat.text-center{"ng-show" => "open() && shopfront_loading"}
     %p.fullwidth
-      = render partial: "components/loading"
+      = render partial: "components/spinner"
 
   .columns.small-12.medium-6.large-5.fat{"ng-show" => "open() && !shopfront_loading"}
     %div{"ng-if" => "::hub.taxons"}
diff --git a/app/views/shops/_hubs.html.haml b/app/views/shops/_hubs.html.haml
index b9faf935dd..243f2e7c63 100644
--- a/app/views/shops/_hubs.html.haml
+++ b/app/views/shops/_hubs.html.haml
@@ -27,7 +27,7 @@
           = t :hubs_distance_filter, location: "{{ nameMatchesFiltered[0].name }}"
   .more-controls
     %span{ng: {show: "closed_shops_loading", cloak: true}}
-      = render partial: "components/loading"
+      = render partial: "components/spinner"
     %span{ng: {if: "!show_closed", cloak: true}}
       %a.button{href: "", ng: {click: "showClosedShops()"}}
         = t '.show_closed_shops'
diff --git a/app/views/spree/admin/orders/bulk_management.html.haml b/app/views/spree/admin/orders/bulk_management.html.haml
index 06335b73ff..50fff333aa 100644
--- a/app/views/spree/admin/orders/bulk_management.html.haml
+++ b/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' }
-    = render partial: "components/loading"
+    = render partial: "components/spinner"
     %h1
       = t("admin.orders.bulk_management.loading")
 
diff --git a/app/views/spree/admin/orders/index.html.haml b/app/views/spree/admin/orders/index.html.haml
index d6629f0a3a..b72a0506a6 100644
--- a/app/views/spree/admin/orders/index.html.haml
+++ b/app/views/spree/admin/orders/index.html.haml
@@ -82,7 +82,7 @@
       %td.actions
         %div.row-loading-icons
           %span{ng: {show: 'rowStatus[order.id] == "loading"', cloak: true}}
-            = render partial: "components/loading"
+            = render partial: "components/spinner"
           %i.success.icon-ok-sign{ng: {show: 'rowStatus[order.id] == "success"'} }
           %i.error.icon-remove-sign.with-tip{ng: {show: 'rowStatus[order.id] == "error"'}, 'ofn-with-tip' => t('.order_not_updated')}
         %a.icon_link.with-tip.icon-edit.no-text{'ng-href' => '{{order.edit_path}}', 'data-action' => 'edit', 'ofn-with-tip' => t('.edit')}
@@ -94,7 +94,7 @@
 .orders-loading{'ng-show' => 'RequestMonitor.loading'}
   .row
     .small-12.columns.fullwidth.text-center
-      = render partial: "components/loading"
+      = render partial: "components/spinner"
   .row
     .small-12.columns.fullwidth.text-center
       %span= t('.loading')
diff --git a/app/views/spree/admin/products/index/_indicators.html.haml b/app/views/spree/admin/products/index/_indicators.html.haml
index 233541910a..ae68aa7b00 100644
--- a/app/views/spree/admin/products/index/_indicators.html.haml
+++ b/app/views/spree/admin/products/index/_indicators.html.haml
@@ -1,6 +1,6 @@
 %div.sixteen.columns.alpha#loading{ 'ng-if' => 'RequestMonitor.loading' }
   %br
-  = render partial: "components/loading"
+  = render partial: "components/spinner"
   %h1= t('.title')
 
 %div.sixteen.columns.alpha{ 'ng-show' => '!RequestMonitor.loading && products.length == 0 && q.query.length == 0' }