[IMP] web: improve design of block_ui

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

@@ -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>

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>

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