From f643839a00988cfc7ff87f46b6a500d73a07e3bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 2 Nov 2021 10:35:06 +0100
Subject: [PATCH] Improve the look of the spinner (#6083)

---
 res/css/views/elements/_InlineSpinner.scss |  2 +-
 res/css/views/elements/_Spinner.scss       | 29 ++++++-
 res/img/spinner.svg                        | 96 ----------------------
 res/img/spinner/spinner-background.svg     |  3 +
 res/img/spinner/spinner-foreground.svg     |  3 +
 5 files changed, 32 insertions(+), 101 deletions(-)
 delete mode 100644 res/img/spinner.svg
 create mode 100644 res/img/spinner/spinner-background.svg
 create mode 100644 res/img/spinner/spinner-foreground.svg

diff --git a/res/css/views/elements/_InlineSpinner.scss b/res/css/views/elements/_InlineSpinner.scss
index ca5cb5d3a8..d7318589c7 100644
--- a/res/css/views/elements/_InlineSpinner.scss
+++ b/res/css/views/elements/_InlineSpinner.scss
@@ -24,5 +24,5 @@ limitations under the License.
 }
 
 .mx_InlineSpinner_icon {
-    display: inline-block;
+    display: inline-block !important; // Override regular mx_Spinner_icon
 }
diff --git a/res/css/views/elements/_Spinner.scss b/res/css/views/elements/_Spinner.scss
index 2df46687af..7cd357fbf9 100644
--- a/res/css/views/elements/_Spinner.scss
+++ b/res/css/views/elements/_Spinner.scss
@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -37,8 +38,28 @@ limitations under the License.
 }
 
 .mx_Spinner_icon {
-    background-color: $primary-content;
-    mask: url('$(res)/img/spinner.svg');
-    mask-size: contain;
-    animation: 1.1s steps(12, end) infinite spin;
+    background-color: $quinary-content;
+    mask: url('$(res)/img/spinner/spinner-background.svg');
+    mask-size: 100%;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: 100%;
+    height: 100%;
+
+    &::before {
+        background-color: $secondary-content;
+        mask: url('$(res)/img/spinner/spinner-foreground.svg');
+        mask-size: 100%;
+
+        width: 100%;
+        height: 100%;
+
+        content: "";
+        display: flex;
+
+        animation: 1s linear spin infinite;
+    }
 }
diff --git a/res/img/spinner.svg b/res/img/spinner.svg
deleted file mode 100644
index c3680f19d2..0000000000
--- a/res/img/spinner.svg
+++ /dev/null
@@ -1,96 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="128"
-   height="128"
-   viewBox="0 0 33.866666 33.866668"
-   version="1.1"
-   id="svg920"
-   inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
-   sodipodi:docname="spinner.svg">
-  <defs
-     id="defs914" />
-  <metadata
-     id="metadata917">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1">
-    <path
-       style="stroke-width:0;fill-opacity:0.30000001"
-       d="M 59,95.605469 V 123 c 0,2.77 2.23,5 5,5 2.77,0 5,-2.23 5,-5 V 95.605469 A 31.999998,31.999998 0 0 1 64,96 31.999998,31.999998 0 0 1 59,95.605469 Z"
-       transform="scale(0.26458333)"
-       id="path2350" />
-    <path
-       style="stroke-width:0;fill-opacity:0.7020452"
-       d="M 64,0 C 61.23,0 59,2.2300001 59,5 V 32.394531 A 31.999998,31.999998 0 0 1 64,32 31.999998,31.999998 0 0 1 69,32.394531 V 5 C 69,2.2300001 66.77,0 64,0 Z"
-       transform="scale(0.26458333)"
-       id="rect2283" />
-    <path
-       style="stroke-width:0;fill-opacity:0.30000001"
-       d="M 43.867188,88.871094 30.169922,112.5957 c -1.385,2.39889 -0.568812,5.44508 1.830078,6.83008 2.39889,1.385 5.445078,0.56881 6.830078,-1.83008 L 52.527344,93.873047 a 31.999998,31.999998 0 0 1 -8.660156,-5.001953 z"
-       transform="scale(0.26458333)"
-       id="path2346" />
-    <path
-       style="stroke-width:0;fill-opacity:0.80019373"
-       d="m 93.150391,7.9121094 c -1.599848,0.111837 -3.114844,0.992881 -3.980469,2.4921876 L 75.472656,34.126953 a 31.999998,31.999998 0 0 1 8.660156,5.001953 L 97.830078,15.404297 C 99.215078,13.005407 98.39889,9.9592187 96,8.5742188 95.100416,8.0548438 94.110299,7.8450072 93.150391,7.9121094 Z"
-       transform="scale(0.26458333)"
-       id="rect2285" />
-    <path
-       style="stroke-width:0;fill-opacity:0.30000001"
-       d="M 34.126953,75.474609 10.404297,89.169922 C 8.0054066,90.554922 7.1892188,93.60111 8.5742188,96 c 1.3849999,2.39889 4.4311882,3.215078 6.8300782,1.830078 L 39.128906,84.132812 a 31.999998,31.999998 0 0 1 -5.001953,-8.658203 z"
-       transform="scale(0.26458333)"
-       id="path2342" />
-    <path
-       style="stroke-width:0;fill-opacity:0.90226436"
-       d="m 115.44531,29.507812 c -0.95991,-0.0671 -1.95002,0.142735 -2.84961,0.66211 L 88.871094,43.867188 a 31.999998,31.999998 0 0 1 5.001953,8.658203 L 117.5957,38.830078 c 2.39889,-1.385 3.21508,-4.431188 1.83008,-6.830078 -0.86562,-1.499306 -2.38062,-2.38035 -3.98047,-2.492188 z"
-       transform="scale(0.26458333)"
-       id="rect2287" />
-    <path
-       style="stroke-width:0;fill-opacity:1"
-       d="M 95.605469,59 A 31.999998,31.999998 0 0 1 96,64 31.999998,31.999998 0 0 1 95.605469,69 H 123 c 2.77,0 5,-2.23 5,-5 0,-2.77 -2.23,-5 -5,-5 z"
-       transform="scale(0.26458333)"
-       id="path2338" />
-    <path
-       style="stroke-width:0;fill-opacity:0.40288368"
-       d="m 5,59 c -2.7699999,0 -5,2.23 -5,5 0,2.77 2.2300001,5 5,5 H 32.394531 A 31.999998,31.999998 0 0 1 32,64 31.999998,31.999998 0 0 1 32.394531,59 Z"
-       transform="scale(0.26458333)"
-       id="rect2289" />
-    <path
-       style="stroke-width:0;fill-opacity:0.30000001"
-       d="m 93.873047,75.472656 a 31.999998,31.999998 0 0 1 -5.001953,8.660156 L 112.5957,97.830078 c 2.39889,1.385 5.44508,0.568812 6.83008,-1.830078 1.385,-2.39889 0.56881,-5.445078 -1.83008,-6.830078 z"
-       transform="scale(0.26458333)"
-       id="path2334" />
-    <path
-       style="stroke-width:0;fill-opacity:0.49898377"
-       d="M 12.554688,29.507812 C 10.95484,29.61965 9.4398437,30.500694 8.5742188,32 c -1.385,2.39889 -0.5688122,5.445078 1.8300782,6.830078 l 23.722656,13.697266 a 31.999998,31.999998 0 0 1 5.001953,-8.660156 L 15.404297,30.169922 c -0.899584,-0.519375 -1.889701,-0.729212 -2.849609,-0.66211 z"
-       transform="scale(0.26458333)"
-       id="rect2291" />
-    <path
-       style="stroke-width:0;fill-opacity:0.30000001"
-       d="m 84.132812,88.871094 a 31.999998,31.999998 0 0 1 -8.658203,5.001953 L 89.169922,117.5957 c 1.385,2.39889 4.431188,3.21508 6.830078,1.83008 2.39889,-1.385 3.215078,-4.43119 1.830078,-6.83008 z"
-       transform="scale(0.26458333)"
-       id="path2330" />
-    <path
-       style="stroke-width:0;fill-opacity:0.5998317"
-       d="M 34.849609,7.9121094 C 33.889701,7.8450072 32.899584,8.0548438 32,8.5742188 29.60111,9.9592187 28.784922,13.005407 30.169922,15.404297 l 13.697266,23.724609 a 31.999998,31.999998 0 0 1 8.658203,-5.001953 L 38.830078,10.404297 C 37.964453,8.9049904 36.449457,8.0239464 34.849609,7.9121094 Z"
-       transform="scale(0.26458333)"
-       id="rect2293" />
-  </g>
-</svg>
diff --git a/res/img/spinner/spinner-background.svg b/res/img/spinner/spinner-background.svg
new file mode 100644
index 0000000000..085abbfc60
--- /dev/null
+++ b/res/img/spinner/spinner-background.svg
@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="15" cy="15" r="14" stroke="#E3E8F0" stroke-width="2"/>
+</svg>
diff --git a/res/img/spinner/spinner-foreground.svg b/res/img/spinner/spinner-foreground.svg
new file mode 100644
index 0000000000..8c1c83aa94
--- /dev/null
+++ b/res/img/spinner/spinner-foreground.svg
@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29 15C29 12.4307 28.293 9.91095 26.9563 7.7167C25.6197 5.52246 23.705 3.73836 21.4219 2.55979C19.1389 1.38123 16.5755 0.853662 14.0126 1.03487C11.4497 1.21607 8.98611 2.09906 6.8916 3.58713" stroke="#737D8C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>