Merge pull request #8523 from seballot/progress-for-ajax-request

Improve loading spinner display

app/assets/javascripts/admin/spree/progress.coffee

@@ -1,7 +1,11 @@
 $(document).ready ->
+  progressTimer = null
   $(document).ajaxStart ->
-    $("#progress").fadeIn()
+    progressTimer = setTimeout ->
+      $("#progress").fadeIn()
+    , 500
 
   $(document).ajaxStop ->
-    $("#progress").fadeOut()
+    clearTimeout(progressTimer) if progressTimer?
+    $("#progress").stop().hide()
 

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 = "#{main_app.api_v0_taxonomy_taxons_url(@taxonomy)}";
         Spree.routes.admin_taxonomy_taxons = "#{spree.admin_taxonomy_taxons_url(@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,24 +1,4 @@
 #progress
-  / By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL
-  %svg{:class => "spinner", :viewbox => "0 0 58 58", :xmlns => "http://www.w3.org/2000/svg"}
-    %g{:fill => "none", "fill-rule" => "evenodd"}
-      %g{:stroke => "currentColor", "stroke-width" => "1.5", :transform => "translate(2 1)"}
-        %circle{:cx => "42.601", :cy => "11.462", :fill => "currentColor", "fill-opacity" => "1", :r => "5"}
-          %animate{:attributename => "fill-opacity", :begin => "0s", :calcmode => "linear", :dur => "1.3s", :repeatcount => "indefinite", :values => "1;0;0;0;0;0;0;0"}
-        %circle{:cx => "49.063", :cy => "27.063", :fill => "currentColor", "fill-opacity" => "0", :r => "5"}
-          %animate{:attributename => "fill-opacity", :begin => "0s", :calcmode => "linear", :dur => "1.3s", :repeatcount => "indefinite", :values => "0;1;0;0;0;0;0;0"}
-        %circle{:cx => "42.601", :cy => "42.663", :fill => "currentColor", "fill-opacity" => "0", :r => "5"}
-          %animate{:attributename => "fill-opacity", :begin => "0s", :calcmode => "linear", :dur => "1.3s", :repeatcount => "indefinite", :values => "0;0;1;0;0;0;0;0"}
-        %circle{:cx => "27", :cy => "49.125", :fill => "currentColor", "fill-opacity" => "0", :r => "5"}
-          %animate{:attributename => "fill-opacity", :begin => "0s", :calcmode => "linear", :dur => "1.3s", :repeatcount => "indefinite", :values => "0;0;0;1;0;0;0;0"}
-        %circle{:cx => "11.399", :cy => "42.663", :fill => "currentColor", "fill-opacity" => "0", :r => "5"}
-          %animate{:attributename => "fill-opacity", :begin => "0s", :calcmode => "linear", :dur => "1.3s", :repeatcount => "indefinite", :values => "0;0;0;0;1;0;0;0"}
-        %circle{:cx => "4.938", :cy => "27.063", :fill => "currentColor", "fill-opacity" => "0", :r => "5"}
-          %animate{:attributename => "fill-opacity", :begin => "0s", :calcmode => "linear", :dur => "1.3s", :repeatcount => "indefinite", :values => "0;0;0;0;0;1;0;0"}
-        %circle{:cx => "11.399", :cy => "11.462", :fill => "currentColor", "fill-opacity" => "0", :r => "5"}
-          %animate{:attributename => "fill-opacity", :begin => "0s", :calcmode => "linear", :dur => "1.3s", :repeatcount => "indefinite", :values => "0;0;0;0;0;0;1;0"}
-        %circle{:cx => "27", :cy => "5", :fill => "currentColor", "fill-opacity" => "0", :r => "5"}
-          %animate{:attributename => "fill-opacity", :begin => "0s", :calcmode => "linear", :dur => "1.3s", :repeatcount => "indefinite", :values => "0;0;0;0;0;0;0;1"}
-
+  = render partial: "components/admin_spinner"
   = Spree.t(:loading)
   \...

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

@@ -1,28 +1,42 @@
+// Loading throbber displayed when ajax request takes too long to complete
 #progress {
-  @include border-radius(10px);
-  position: fixed;
-  top: -10px;
-  left: 50%;
-  z-index: 1000;
-  opacity: 0.8;
-  width: 200px;
-  background-color: $spree-blue;
-  color: $color-1;
   display: none;
-  font-size: 120%;
+  @include border-radius(0 0 4px 4px);
+  position: fixed;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1000;
+  background-color: $spree-blue;
+  color: #FFFFFF;
+  opacity: .8;
+  font-size: 1rem;
+  padding: .5rem 1rem;
   font-weight: bold;
-  line-height: 40px;
-  margin-left: -100px;
-  padding-top: 15px;
   text-align: center;
   text-transform: uppercase;
 
   .spinner {
-    position: absolute;
-    left: 50%;
-    width: 30px;
-    height: 30px;
-    top: -5px;
-    margin-left: -15px;
+    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