From 927f68a3f7caf79a83e0e161c2d053fd57074bf5 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Wed, 7 Nov 2018 11:59:12 +0100
Subject: [PATCH] fix #2334 @2

---
 images/interface.svg           |  6 ++----
 js/libs/fluidbook/fluidbook.js |  8 +++-----
 style/fluidbook.less           | 22 ++++++++++++++++++++++
 3 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/images/interface.svg b/images/interface.svg
index a9da0ad3..a192010f 100644
--- a/images/interface.svg
+++ b/images/interface.svg
@@ -1,10 +1,8 @@
 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
     <symbol id="interface-loader" viewBox="0 0 48 48">
         <circle cx="24" cy="24" r="23"></circle>
-        <circle cx="24" cy="24" fill="none" stroke="currentColor" stroke-width="3" r="16" stroke-dasharray="80 80"
-                transform="rotate(102 24 24)">
-            <animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 24 24;360 24 24"
-                              keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform>
+        <circle class="animate" cx="24" cy="24" fill="none" stroke="currentColor" stroke-width="3" r="16" stroke-dasharray="80 80"
+                transform="rotate(0 24 24)">
         </circle>
     </symbol>
     <symbol id="interface-chevron" viewBox="0 0 512 512">
diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index a5d03154..2a93ab71 100644
--- a/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@ -1068,7 +1068,7 @@ Fluidbook.prototype = {
         });
     },
     displayLoader: function () {
-        $("#loader").show();
+        $("#loader").addClass('show');
         if (!this.support.isMobile) {
             $('body').addClass('loading');
         }
@@ -1097,10 +1097,8 @@ Fluidbook.prototype = {
         if (!force && $('#splash').css('visibility') == 'visible') {
             return;
         }
-        if (this.support.isMobile) {
-            $("#loader").hide();
-        } else {
-            $("#loader").hide();
+        $("#loader").removeClass('show');
+        if (!this.support.isMobile) {
             $('body').removeClass('loading');
         }
     },
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 0c5f9d75..559852d6 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -250,6 +250,15 @@ body, html {
 
 }
 
+@keyframes loader-spin {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
 /* Loader */
 #loader {
 	position: absolute;
@@ -261,11 +270,24 @@ body, html {
 	width: @loaderSize;
 	height: @loaderSize;
 	margin: @loaderMargin 0 0 @loaderMargin;
+	display: none;
+
 	svg {
 		width: 100%;
 		height: 100%;
 		fill: @loader-background-color;
 		color: @loader-foreground-color;
+		transform-origin: 50% 50%
+	}
+
+	&.show {
+		display: block;
+		svg {
+			animation-name: loader-spin;
+			animation-duration: 1s;
+			animation-iteration-count: infinite;
+			animation-timing-function: linear;
+		}
 	}
 }
 
-- 
2.39.5