From 0e3084cce3ca2bb6506500f0d02fc94cffa8298b Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Fri, 11 Sep 2020 11:28:59 +0200
Subject: [PATCH] provide alternative spinner for ie11

---
 src/main.js                  |  6 +++++
 src/ui/web/common.js         | 15 +++++++++---
 src/ui/web/css/spinner.css   | 45 +++++++++++++++++++++++++++++++-----
 src/ui/web/css/timeline.css  |  2 +-
 src/ui/web/view-gallery.html |  2 +-
 5 files changed, 59 insertions(+), 11 deletions(-)

diff --git a/src/main.js b/src/main.js
index 2f5165aa..8a7cbf0d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -80,6 +80,12 @@ async function loadOlmWorker(paths) {
 // see https://github.com/rollup/plugins/tree/master/packages/multi-entry
 export async function main(container, paths) {
     try {
+        const isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
+        if (isIE11) {
+            document.body.className += " ie11";
+        } else {
+            document.body.className += " not-ie11";
+        }
         // to replay:
         // const fetchLog = await (await fetch("/fetchlogs/constrainterror.json")).json();
         // const replay = new ReplayRequester(fetchLog, {delay: false});
diff --git a/src/ui/web/common.js b/src/ui/web/common.js
index 2883652e..d6c4dddc 100644
--- a/src/ui/web/common.js
+++ b/src/ui/web/common.js
@@ -15,9 +15,18 @@ limitations under the License.
 */
 
 export function spinner(t, extraClasses = undefined) {
-    return t.svg({className: Object.assign({"spinner": true}, extraClasses), viewBox:"0 0 100 100"}, 
-        t.circle({cx:"50%", cy:"50%", r:"45%", pathLength:"100"})
-    );
+    if (document.body.classList.contains("ie11")) {
+        return t.div({className: "spinner"}, [
+            t.div(),
+            t.div(),
+            t.div(),
+            t.div(),
+        ]);
+    } else {
+        return t.svg({className: Object.assign({"spinner": true}, extraClasses), viewBox:"0 0 100 100"}, 
+            t.circle({cx:"50%", cy:"50%", r:"45%", pathLength:"100"})
+        );
+    }
 }
 
 /**
diff --git a/src/ui/web/css/spinner.css b/src/ui/web/css/spinner.css
index 62974da6..1548b9b6 100644
--- a/src/ui/web/css/spinner.css
+++ b/src/ui/web/css/spinner.css
@@ -32,24 +32,57 @@ limitations under the License.
     }
 }
 
-.spinner circle {
+.not-ie11 .spinner circle {
     transform-origin: 50% 50%;
     animation-name: spinner;
     animation-duration: 2s;
     animation-iteration-count: infinite;
     animation-timing-function: linear;
-    /**
-     * TODO
-     * see if with IE11 we can just set a static stroke state and make it rotate?
-     */
     stroke-dasharray: 0 0 85 85;
-
     fill: none;
     stroke: currentcolor;
     stroke-width: 12;
     stroke-linecap: butt;
 }
 
+.ie11 .spinner {
+  display: inline-block;
+  position: relative;
+}
+
+.ie11 .spinner div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  padding: 2px;
+  border: 2px solid currentcolor;
+  border-radius: 50%;
+  animation: ie-spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: currentcolor transparent transparent transparent;
+  width: var(--size);
+  height: var(--size);
+}
+
+.ie11 .spinner div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+.ie11 .spinner div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+.ie11 .spinner div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+
+@keyframes ie-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+
 .spinner {
     --size: 20px;
     width: var(--size);
diff --git a/src/ui/web/css/timeline.css b/src/ui/web/css/timeline.css
index 469e117f..f96adf6e 100644
--- a/src/ui/web/css/timeline.css
+++ b/src/ui/web/css/timeline.css
@@ -77,6 +77,6 @@ limitations under the License.
 }
 
 .GapView > div {
-    flex: 1;
+    flex: 1 1 0;
     margin-left: 10px;
 }
diff --git a/src/ui/web/view-gallery.html b/src/ui/web/view-gallery.html
index 43827afb..ecf328db 100644
--- a/src/ui/web/view-gallery.html
+++ b/src/ui/web/view-gallery.html
@@ -5,7 +5,7 @@
         <link rel="stylesheet" type="text/css" href="css/main.css">
         <link rel="stylesheet" type="text/css" href="css/themes/element/theme.css">
 	</head>
-	<body>
+	<body class="not-ie11">
         <script type="text/javascript">
             function vm(o) {
                 // fake EventEmitter