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')}