From 0eb97f1cdc77ae2194c1a4537670109f9919568a Mon Sep 17 00:00:00 2001
From: Sebastian Castro <sebastian.castro@protonmail.com>
Date: Tue, 11 Jan 2022 21:52:49 +0100
Subject: [PATCH] loading-popup: improve style

---
 .../layouts/admin/_progress_spinner.html.haml | 22 +------------
 .../css/admin/components/progress.scss        | 32 ++++++++-----------
 2 files changed, 14 insertions(+), 40 deletions(-)

diff --git a/app/views/spree/layouts/admin/_progress_spinner.html.haml b/app/views/spree/layouts/admin/_progress_spinner.html.haml
index a28458afad..6d0c9c72ba 100644
--- a/app/views/spree/layouts/admin/_progress_spinner.html.haml
+++ b/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"}
-
+  %i.spinner.fa.fa-spin.fa-circle-o-notch
   = Spree.t(:loading)
   \...
diff --git a/app/webpacker/css/admin/components/progress.scss b/app/webpacker/css/admin/components/progress.scss
index 8221701587..f62f64d85f 100644
--- a/app/webpacker/css/admin/components/progress.scss
+++ b/app/webpacker/css/admin/components/progress.scss
@@ -1,28 +1,22 @@
+// 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;
   }
 }