loading-message: make them all look the same in admin

use font awesome spinner instead of an image

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: image_path("/spinning-circles.svg")}
+  %i.spinner.fa.fa-spin.fa-circle-o-notch
   %h1
     {{ 'js.admin.panels.exchange_products.loading_variants' | t }}

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

@@ -35,9 +35,9 @@
 
   .row{ 'ng-if' => 'shop_id && RequestMonitor.loading' }
     .sixteen.columns.alpha#loading
-      = render partial: "components/spinner"
+      = render partial: "components/admin_spinner"
       %h1
-        =t :loading_customers
+        = t :loading_customers
 
   .row{ :class => "sixteen columns alpha", 'ng-show' => '!RequestMonitor.loading && filteredCustomers.length == 0'}
     %h1#no_results

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

@@ -9,8 +9,9 @@
       %columns-dropdown{ action: "#{controller_name}_#{action_name}" }
   .row{ 'ng-if' => '!loaded' }
     .sixteen.columns.alpha#loading
-      = render partial: "components/spinner"
-      %h1= t('.loading_enterprises')
+      = render partial: "components/admin_spinner"
+      %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/enterprises/form/_primary_details.html.haml

@@ -57,7 +57,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/spinner"
+        = render partial: "components/admin_spinner"
       %span{ ng: { class: 'availability.toLowerCase()', hide: "checking" } }
         {{ availability }}
         %i{ ng: { class: "{'icon-ok-sign': availability == 'Available', 'icon-remove-sign': availability == 'Unavailable'}" } }

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

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

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

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

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

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

app/views/components/_admin_spinner.haml

@@ -0,0 +1 @@
+%i.spinner.fa.fa-spin.fa-circle-o-notch

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/spinner"
+    = render partial: "components/admin_spinner"
     %h1
       = t("admin.orders.bulk_management.loading")
 

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

@@ -92,13 +92,10 @@
         %div{'ng-if' => 'order.ready_to_capture'}
           %button.icon-capture.icon_link.no-text{'ng-click' => 'capturePayment(order)', rel: 'nofollow', 'ofn-with-tip' => t('.capture')}
 
-.orders-loading{'ng-show' => 'RequestMonitor.loading'}
-  .row
-    .small-12.columns.fullwidth.text-center
-      = render partial: "components/spinner"
-  .row
-    .small-12.columns.fullwidth.text-center
-      %span= t('.loading')
+.sixteen.columns.alpha#loading{ 'ng-show' => 'RequestMonitor.loading' }
+  = render partial: "components/admin_spinner"
+  %h1
+    = t('.loading')
 
 %div{'ng-show' => "!RequestMonitor.loading && orders.length > 0" }
   = render partial: 'admin/shared/angular_pagination'

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

@@ -1,7 +1,7 @@
 %div.sixteen.columns.alpha#loading{ 'ng-if' => 'RequestMonitor.loading' }
-  %br
-  = render partial: "components/spinner"
-  %h1= t('.title')
+  = render partial: "components/admin_spinner"
+  %h1
+    = t('.title')
 
 %div.sixteen.columns.alpha{ 'ng-show' => '!RequestMonitor.loading && products.length == 0 && q.query.length == 0' }
   %h1#no_results= t('.no_products')

app/views/spree/admin/taxonomies/edit.haml

@@ -20,10 +20,6 @@
         Spree.routes.taxonomy_taxons_path = "#{main_app.api_v0_taxonomy_taxons_path(@taxonomy)}";
         Spree.routes.admin_taxonomy_taxons_path = "#{spree.admin_taxonomy_taxons_path(@taxonomy)}";
       #taxonomy_tree.tree
-    #progress{style: "display:none;"}
-      = image_pack_tag 'select2-spinner.gif', title: 'Spinner', style: "vertical-align:bottom;"
-      = t("spree.updating")
-      \..
     .info= t("spree.taxonomy_tree_instruction")
     %br/
     .filter-actions.actions

app/views/spree/layouts/admin/_progress_spinner.html.haml

@@ -1,4 +1,4 @@
 #progress
-  %i.spinner.fa.fa-spin.fa-circle-o-notch
+  = render partial: "components/admin_spinner"
   = Spree.t(:loading)
   \...

app/webpacker/css/admin/components/progress.scss

@@ -20,3 +20,23 @@
     margin-right: 5px;
   }
 }
+
+// Loading message replacing a table when it's loading for example
+#loading {
+  text-align: center;
+  padding: 2rem 0;
+  color: $color-4;
+
+  i {
+    font-size: 2rem;
+  }
+  img.spinner {
+    border: 0px;
+    width: 100px;
+    height: 100px;
+  }
+  h1 {
+    margin-top: 20px;
+    color: inherit;    
+  }
+}

app/webpacker/css/admin/openfoodnetwork.scss

@@ -203,19 +203,6 @@ table#listing_enterprise_groups {
   }
 }
 
-#loading {
-  text-align: center;
-  img.spinner {
-    border: 0px;
-    width: 100px;
-    height: 100px;
-  }
-  h1 {
-    margin-top: 20px;
-    color: gray;
-  }
-}
-
 .field_with_errors > input {
     border-color: red;
 }

app/webpacker/css/admin/orders.scss

@@ -90,18 +90,6 @@ table.index td.actions {
   text-align: left;
 }
 
-.orders-loading {
-  margin-top: 1em;
-
-  img {
-    width: 85px;
-  }
-
-  span {
-    font-size: 1.2em;
-  }
-}
-
 .index-controls {
 
   button {

spec/system/admin/bulk_order_management_spec.rb

@@ -418,7 +418,7 @@ describe '
           expect(page).to have_select2 'order_cycle_filter',
                                        with_options: OrderCycle.pluck(:name).unshift("All")
           select2_select oc1.name, from: "order_cycle_filter"
-          expect(page).to have_no_selector "#loading img.spinner"
+          expect(page).to have_no_selector "#loading i"
           expect(page).to have_selector "tr#li_#{li1.id}"
           expect(page).to have_no_selector "tr#li_#{li2.id}"
         end

spec/system/admin/bulk_product_update_spec.rb

@@ -852,10 +852,10 @@ describe '
         attach_file 'image-upload', Rails.root.join("public/500.jpg"), visible: false
 
         # Shows spinner whilst loading
-        expect(page).to have_css "img.spinner", visible: true
+        expect(page).to have_css ".spinner", visible: true
       end
 
-      expect(page).to have_no_css "img.spinner", visible: true
+      expect(page).to have_no_css ".spinner", visible: true
       expect(page).to have_no_selector "div.reveal-modal"
 
       within "table#listing_products tr#p_#{product.id}" do