From 7b2020a44e5545b4976abca85861aaf3fed18f4d Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Tue, 10 Nov 2020 23:47:00 +0300
Subject: [PATCH] [common] removed svg animation in loading mask image

---
 apps/common/main/lib/component/LoadMask.js    |  4 ++--
 .../main/resources/img/load-mask/loading.svg  | 16 +++++--------
 apps/common/main/resources/less/loadmask.less | 23 +++++++++++++++++--
 3 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/apps/common/main/lib/component/LoadMask.js b/apps/common/main/lib/component/LoadMask.js
index 323bbba84..c9634f2aa 100644
--- a/apps/common/main/lib/component/LoadMask.js
+++ b/apps/common/main/lib/component/LoadMask.js
@@ -78,8 +78,8 @@ define([
 
             template: _.template([
                 '<div id="<%= id %>" class="asc-loadmask-body <%= cls %>" role="presentation" tabindex="-1">',
-                '<div class="asc-loadmask-image"></div>',
-                '<div class="asc-loadmask-title"><%= title %></div>',
+                    '<i id="loadmask-spinner" class="asc-loadmask-image"></i>',
+                    '<div class="asc-loadmask-title"><%= title %></div>',
                 '</div>'
             ].join('')),
 
diff --git a/apps/common/main/resources/img/load-mask/loading.svg b/apps/common/main/resources/img/load-mask/loading.svg
index 573b12985..903decc03 100644
--- a/apps/common/main/resources/img/load-mask/loading.svg
+++ b/apps/common/main/resources/img/load-mask/loading.svg
@@ -3,16 +3,12 @@
         use {display: none}
         use:target {display: inline}
     </style>
-    <symbol id="middle1" viewBox="0 0 28 28">
-        <circle cx="14" cy="14" fill="none" stroke="#fff" stroke-width="1.5" r="10.25" stroke-dasharray="160%, 40%">
-            <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 14 14;360 14 14" keyTimes="0;1"/>
-        </circle>
+    <symbol id="symb-middle" viewBox="0 0 28 28">
+        <circle cx="14" cy="14" fill="none" stroke="#fff" stroke-width="1.5" r="10.25" stroke-dasharray="160%, 40%" />
     </symbol>
-    <symbol id="small1" viewBox="0 0 20 20">
-        <circle cx="10" cy="10" fill="none" stroke="#444" stroke-width="1.5" r="7.25" stroke-dasharray="160%, 40%">
-            <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 10 10;360 10 10" keyTimes="0;1"/>
-        </circle>
+    <symbol id="symb-small1" viewBox="0 0 20 20">
+        <circle cx="10" cy="10" fill="none" stroke="#444" stroke-width="1.5" r="7.25" stroke-dasharray="160%, 40%" />
     </symbol>
-    <use id="middle" href="#middle1" />
-    <use id="small" href="#small1" />
+    <use id="middle" href="#symb-middle" />
+    <use id="small" href="#symb-small" />
 </svg>
diff --git a/apps/common/main/resources/less/loadmask.less b/apps/common/main/resources/less/loadmask.less
index c8d7793af..65e3e6bbe 100644
--- a/apps/common/main/resources/less/loadmask.less
+++ b/apps/common/main/resources/less/loadmask.less
@@ -36,7 +36,8 @@
     }
 
     .asc-loadmask-image {
-        background-image: ~"url(@{common-image-const-path}/load-mask/loading.svg#middle)";
+        //background-image: ~"url(@{common-image-const-path}/load-mask/loading.svg#middle)";
+        background-image: ~"url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+PGNpcmNsZSBjeD0iMTQiIGN5PSIxNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuNSIgcj0iMTAuMjUiIHN0cm9rZS1kYXNoYXJyYXk9IjE2MCUsIDQwJSIgLz48L3N2Zz4=)";
         height: @loadmask-image-height;
         width: @loadmask-image-width;
         float: left;
@@ -57,7 +58,8 @@
         transform: translate(-50%, 0);
 
         .asc-loadmask-image {
-            background-image: ~"url(@{common-image-const-path}/load-mask/loading.svg#small)";
+            //background-image: ~"url(@{common-image-const-path}/load-mask/loading.svg#small)";
+            background-image: ~"url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PGNpcmNsZSBjeD0iMTAiIGN5PSIxMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNDQ0IiBzdHJva2Utd2lkdGg9IjEuNSIgcj0iNy4yNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTYwJSwgNDAlIiAvPjwvc3ZnPg==)";
             height: @loadmask-small-image-height;
             width: @loadmask-small-image-width;
         }
@@ -104,3 +106,20 @@
         height: 100%;
     }
 }
+
+@keyframes slidein {
+    from {
+        transform: rotate(0);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+#loadmask-spinner {
+    animation-duration: .8s;
+    animation-name: slidein;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}