From 05ab3dec89e8bcd1e6bf9f70cfdc99b5950f4d24 Mon Sep 17 00:00:00 2001
From: Brieuc-brd <brd@odoo.com>
Date: Tue, 1 Feb 2022 14:53:56 +0000
Subject: [PATCH] [IMP] web: improve design of block_ui
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Prior this commit the spinner was an image.
After this commit the spinner is an animated SVG. It also improves the
layout of the block_ui component.

task-2750837

closes odoo/odoo#83811

Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>
---
 addons/web/static/img/spin.svg              | 34 +++++++++++++++++++++
 addons/web/static/src/core/ui/block_ui.js   |  8 ++---
 addons/web/static/src/core/ui/block_ui.scss |  7 ++---
 3 files changed, 40 insertions(+), 9 deletions(-)
 create mode 100644 addons/web/static/img/spin.svg

diff --git a/addons/web/static/img/spin.svg b/addons/web/static/img/spin.svg
new file mode 100644
index 00000000000..112245b8758
--- /dev/null
+++ b/addons/web/static/img/spin.svg
@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="o_spinner" viewBox="0 0 50 50" width="50" height="50">
+    <style>
+        @keyframes dash {
+            0% {
+                stroke-dashoffset: 120;
+                stroke-width: 2px;
+            }
+            35%, 50% {
+                stroke-dashoffset: 0;
+                stroke-width: 8px;
+            }
+            85%, 100% {
+                stroke-dashoffset: -120;
+                stroke-width: 2px;   
+            }
+        }
+        @keyframes rotate {
+            0% {
+                transform: rotate(0deg);
+            }
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+        svg {
+            animation: rotate 1s linear infinite;
+        }
+        circle {
+            stroke-dasharray: 120, 120;
+            animation: dash 2.5s ease infinite;
+        }
+    </style>
+    <circle cy="25" cx="25" r="19" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>
+</svg>
diff --git a/addons/web/static/src/core/ui/block_ui.js b/addons/web/static/src/core/ui/block_ui.js
index 9e8527a479b..8cd95abf8ba 100644
--- a/addons/web/static/src/core/ui/block_ui.js
+++ b/addons/web/static/src/core/ui/block_ui.js
@@ -71,12 +71,12 @@ export class BlockUI extends Component {
 }
 
 BlockUI.template = xml`
-    <div t-att-class="state.blockUI ? 'o_blockUI fixed-top d-flex justify-content-center align-items-center flex-column vh-100 bg-black' : ''">
+    <div t-att-class="state.blockUI ? 'o_blockUI fixed-top d-flex justify-content-center align-items-center flex-column vh-100 bg-black-50' : ''">
       <t t-if="state.blockUI">
-        <div class="o_spinner mb-3 h-auto">
-            <img src="/web/static/img/spin.png" alt="Loading..."/>
+        <div class="o_spinner mb-4">
+            <img src="/web/static/img/spin.svg" alt="Loading..."/>
         </div>
-        <div class="o_message text-center">
+        <div class="o_message text-center px-4">
             <t t-esc="state.line1"/> <br/>
             <t t-esc="state.line2"/>
         </div>
diff --git a/addons/web/static/src/core/ui/block_ui.scss b/addons/web/static/src/core/ui/block_ui.scss
index 0d089afe106..cbb5bdce640 100644
--- a/addons/web/static/src/core/ui/block_ui.scss
+++ b/addons/web/static/src/core/ui/block_ui.scss
@@ -1,8 +1,5 @@
 .o_blockUI {
 	cursor: wait;
-	opacity: 0.6;
-	
-	img {
-		animation: fa-spin 1s infinite steps(12);
-	}
+	-webkit-backdrop-filter: blur(2px);
+	backdrop-filter: blur(2px);
 }