From 84d681ecce35bb1f347e3832f9e08d37e5cf393f Mon Sep 17 00:00:00 2001
From: aignatov-bio <aignatov@biosistemika.com>
Date: Mon, 23 Nov 2020 14:12:29 +0100
Subject: [PATCH 1/2] Replace loading spinner

---
 app/assets/javascripts/application.js.erb     | 22 ++------
 app/assets/stylesheets/shared/assets.scss     |  2 +-
 .../stylesheets/shared/file_preview.scss      |  3 +-
 app/assets/stylesheets/themes/scinote.scss    | 36 +++++++++----
 public/images/medium/loading.svg              | 53 +++++++++++++++++++
 public/images/medium/loading_white.svg        | 53 +++++++++++++++++++
 6 files changed, 137 insertions(+), 32 deletions(-)
 create mode 100644 public/images/medium/loading.svg
 create mode 100644 public/images/medium/loading_white.svg

diff --git a/app/assets/javascripts/application.js.erb b/app/assets/javascripts/application.js.erb
index c568a3051..df6c5b667 100644
--- a/app/assets/javascripts/application.js.erb
+++ b/app/assets/javascripts/application.js.erb
@@ -102,27 +102,11 @@ function animateLoading(start){
  * Shows spinner if start is true or not given, hides it if false.
  * Optional parameter options for spin.js options.
  */
-function animateSpinner(el, start, options) {
+function animateSpinner(el, start) {
   // If overlaying the whole page, put the spinner in the middle of the page
-  var overlayPage = false;
-  if (_.isUndefined(el) || el === null) {
-    overlayPage = true;
-    if ($(document.body).has('.loading-overlay-center').length === 0) {
-      $(document.body).append('<div class="loading-overlay-center" />');
-    }
-    el = $(document.body).find('.loading-overlay-center');
-  }
+  var overlayPage = _.isUndefined(el) || el === null;
 
-  if (_.isUndefined(start)) {
-    start = true;
-  }
-
-  if (start && options) {
-    $(el).spin(options);
-  }
-  else {
-    $(el).spin(start);
-  }
+  if (_.isUndefined(start)) start = true;
 
   if (start) {
     if (overlayPage) {
diff --git a/app/assets/stylesheets/shared/assets.scss b/app/assets/stylesheets/shared/assets.scss
index 21e0ec4fc..3bf39918c 100644
--- a/app/assets/stylesheets/shared/assets.scss
+++ b/app/assets/stylesheets/shared/assets.scss
@@ -25,7 +25,7 @@
     width: 100%;
 
     &.processing {
-      background-image: url("/images/medium/processing.gif");
+      background-image: url("/images/medium/loading.svg");
       background-position: center;
       background-repeat: no-repeat;
     }
diff --git a/app/assets/stylesheets/shared/file_preview.scss b/app/assets/stylesheets/shared/file_preview.scss
index ca255ef3d..a0aa8276a 100644
--- a/app/assets/stylesheets/shared/file_preview.scss
+++ b/app/assets/stylesheets/shared/file_preview.scss
@@ -31,9 +31,10 @@
     width: 100%;
 
     &.processing {
-      background-image: url("/images/medium/processing.gif");
+      background-image: url("/images/medium/loading_white.svg");
       background-position: center;
       background-repeat: no-repeat;
+      background-size: 64px;
     }
 
     .wopi-file-preview {
diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss
index 3b27f3926..0603379b5 100644
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@@ -1256,20 +1256,34 @@ ul.content-activities {
 
 /* Overlay to disable interaction while loading ajax */
 .loading-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
   bottom: 0;
-  z-index: 1000000000;
   cursor: wait;
-}
-
-.loading-overlay-center {
-  position: fixed;
-  left:50%;
-  top:50%;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
   z-index: 1000000000;
+
+  &:before {
+    background: $color-white;
+    content: '';
+    display: block;
+    height: 100%;
+    opacity: .5;
+    width: 100%;
+  }
+
+  &:after {
+    background-image: url("/images/medium/loading.svg");
+    background-position: center;
+    background-repeat: no-repeat;
+    content: '';
+    display: block;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
 }
 
 .turbolinks-progress-bar::before {
diff --git a/public/images/medium/loading.svg b/public/images/medium/loading.svg
new file mode 100644
index 000000000..9667efbbe
--- /dev/null
+++ b/public/images/medium/loading.svg
@@ -0,0 +1,53 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<path id="bottom_left" fill-rule="evenodd" clip-rule="evenodd" d="M16 32L2.09393 32C0.937155 32 3.51904e-07 31.1293 4.4579e-07 30.0554L1.67455e-06 16L16 32Z" fill="#104DA9"/>
+<path id="bottom_right" fill-rule="evenodd" clip-rule="evenodd" d="M32 16L32 29.9061C32 31.0628 31.1294 32 30.0554 32L16 32L32 16Z" fill="#104DA9"/>
+<path id="top_right" fill-rule="evenodd" clip-rule="evenodd" d="M16 0H29.9061C31.0628 0 32 0.870649 32 1.94458V16L16 0Z" fill="#104DA9"/>
+<path id="top_left" fill-rule="evenodd" clip-rule="evenodd" d="M0 16L-6.07854e-07 2.09393C-6.58418e-07 0.937155 0.870648 2.37732e-07 1.94458 1.90789e-07L16 -4.23593e-07L0 16Z" fill="#104DA9"/>
+<animate
+  xlink:href="#top_left"
+  attributeName="opacity"
+  from="1" to="0" dur="0.8s"
+  values="1; 1; 0; 0; 0; 0; 0; 0; 1"
+  keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875;  1"
+  repeatCount="indefinite"
+  id="tlfade"
+  />
+
+  <animate
+    xlink:href="#top_right"
+    attributeName="opacity"
+    from="0" to="1" dur="0.8s"
+    values="0; 0; 1; 1; 0; 0; 0; 0; 0"
+    keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1"
+    repeatCount="indefinite"
+    id="trfade"
+    />
+
+    <animate
+      xlink:href="#bottom_right"
+      attributeName="opacity"
+      from="0" to="1" dur="0.8s"
+      values="0; 0; 0; 0; 1; 1; 0; 0; 0"
+      keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1"
+      repeatCount="indefinite"
+      id="brfade"
+      />
+
+      <animate
+        xlink:href="#bottom_left"
+        attributeName="opacity"
+        from="0" to="1" dur="0.8s"
+        values="0; 0; 0; 0; 0; 0; 1; 1; 0"
+        keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1"
+        repeatCount="indefinite"
+        id="blfade"
+        />
+
+
+
+
+
+
+
+
+</svg>
diff --git a/public/images/medium/loading_white.svg b/public/images/medium/loading_white.svg
new file mode 100644
index 000000000..0d9a6c442
--- /dev/null
+++ b/public/images/medium/loading_white.svg
@@ -0,0 +1,53 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<path id="bottom_left" fill-rule="evenodd" clip-rule="evenodd" d="M16 32L2.09393 32C0.937155 32 3.51904e-07 31.1293 4.4579e-07 30.0554L1.67455e-06 16L16 32Z" fill="#ffffff"/>
+<path id="bottom_right" fill-rule="evenodd" clip-rule="evenodd" d="M32 16L32 29.9061C32 31.0628 31.1294 32 30.0554 32L16 32L32 16Z" fill="#ffffff"/>
+<path id="top_right" fill-rule="evenodd" clip-rule="evenodd" d="M16 0H29.9061C31.0628 0 32 0.870649 32 1.94458V16L16 0Z" fill="#ffffff"/>
+<path id="top_left" fill-rule="evenodd" clip-rule="evenodd" d="M0 16L-6.07854e-07 2.09393C-6.58418e-07 0.937155 0.870648 2.37732e-07 1.94458 1.90789e-07L16 -4.23593e-07L0 16Z" fill="#ffffff"/>
+<animate
+  xlink:href="#top_left"
+  attributeName="opacity"
+  from="1" to="0" dur="0.8s"
+  values="1; 1; 0; 0; 0; 0; 0; 0; 1"
+  keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875;  1"
+  repeatCount="indefinite"
+  id="tlfade"
+  />
+
+  <animate
+    xlink:href="#top_right"
+    attributeName="opacity"
+    from="0" to="1" dur="0.8s"
+    values="0; 0; 1; 1; 0; 0; 0; 0; 0"
+    keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1"
+    repeatCount="indefinite"
+    id="trfade"
+    />
+
+    <animate
+      xlink:href="#bottom_right"
+      attributeName="opacity"
+      from="0" to="1" dur="0.8s"
+      values="0; 0; 0; 0; 1; 1; 0; 0; 0"
+      keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1"
+      repeatCount="indefinite"
+      id="brfade"
+      />
+
+      <animate
+        xlink:href="#bottom_left"
+        attributeName="opacity"
+        from="0" to="1" dur="0.8s"
+        values="0; 0; 0; 0; 0; 0; 1; 1; 0"
+        keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1"
+        repeatCount="indefinite"
+        id="blfade"
+        />
+
+
+
+
+
+
+
+
+</svg>

From ba39d8d31b5db9667c75234ba4fb3c62711ec9d5 Mon Sep 17 00:00:00 2001
From: aignatov-bio <aignatov@biosistemika.com>
Date: Mon, 23 Nov 2020 15:02:50 +0100
Subject: [PATCH 2/2] Fix markup

---
 app/assets/stylesheets/themes/scinote.scss |  8 +--
 public/images/medium/loading.svg           | 65 +++++++++------------
 public/images/medium/loading_white.svg     | 67 +++++++++-------------
 3 files changed, 59 insertions(+), 81 deletions(-)

diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss
index 0603379b5..45b352513 100644
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@@ -1264,20 +1264,20 @@ ul.content-activities {
   top: 0;
   z-index: 1000000000;
 
-  &:before {
+  &::before {
     background: $color-white;
-    content: '';
+    content: "";
     display: block;
     height: 100%;
     opacity: .5;
     width: 100%;
   }
 
-  &:after {
+  &::after {
     background-image: url("/images/medium/loading.svg");
     background-position: center;
     background-repeat: no-repeat;
-    content: '';
+    content: "";
     display: block;
     height: 100%;
     position: absolute;
diff --git a/public/images/medium/loading.svg b/public/images/medium/loading.svg
index 9667efbbe..338af0e24 100644
--- a/public/images/medium/loading.svg
+++ b/public/images/medium/loading.svg
@@ -12,42 +12,31 @@
   repeatCount="indefinite"
   id="tlfade"
   />
-
-  <animate
-    xlink:href="#top_right"
-    attributeName="opacity"
-    from="0" to="1" dur="0.8s"
-    values="0; 0; 1; 1; 0; 0; 0; 0; 0"
-    keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1"
-    repeatCount="indefinite"
-    id="trfade"
-    />
-
-    <animate
-      xlink:href="#bottom_right"
-      attributeName="opacity"
-      from="0" to="1" dur="0.8s"
-      values="0; 0; 0; 0; 1; 1; 0; 0; 0"
-      keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1"
-      repeatCount="indefinite"
-      id="brfade"
-      />
-
-      <animate
-        xlink:href="#bottom_left"
-        attributeName="opacity"
-        from="0" to="1" dur="0.8s"
-        values="0; 0; 0; 0; 0; 0; 1; 1; 0"
-        keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1"
-        repeatCount="indefinite"
-        id="blfade"
-        />
-
-
-
-
-
-
-
-
+<animate
+  xlink:href="#top_right"
+  attributeName="opacity"
+  from="0" to="1" dur="0.8s"
+  values="0; 0; 1; 1; 0; 0; 0; 0; 0"
+  keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1"
+  repeatCount="indefinite"
+  id="trfade"
+/>
+<animate
+  xlink:href="#bottom_right"
+  attributeName="opacity"
+  from="0" to="1" dur="0.8s"
+  values="0; 0; 0; 0; 1; 1; 0; 0; 0"
+  keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1"
+  repeatCount="indefinite"
+  id="brfade"
+/>
+<animate
+  xlink:href="#bottom_left"
+  attributeName="opacity"
+  from="0" to="1" dur="0.8s"
+  values="0; 0; 0; 0; 0; 0; 1; 1; 0"
+  keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1"
+  repeatCount="indefinite"
+  id="blfade"
+/>
 </svg>
diff --git a/public/images/medium/loading_white.svg b/public/images/medium/loading_white.svg
index 0d9a6c442..c3a97bb40 100644
--- a/public/images/medium/loading_white.svg
+++ b/public/images/medium/loading_white.svg
@@ -11,43 +11,32 @@
   keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875;  1"
   repeatCount="indefinite"
   id="tlfade"
-  />
-
-  <animate
-    xlink:href="#top_right"
-    attributeName="opacity"
-    from="0" to="1" dur="0.8s"
-    values="0; 0; 1; 1; 0; 0; 0; 0; 0"
-    keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1"
-    repeatCount="indefinite"
-    id="trfade"
-    />
-
-    <animate
-      xlink:href="#bottom_right"
-      attributeName="opacity"
-      from="0" to="1" dur="0.8s"
-      values="0; 0; 0; 0; 1; 1; 0; 0; 0"
-      keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1"
-      repeatCount="indefinite"
-      id="brfade"
-      />
-
-      <animate
-        xlink:href="#bottom_left"
-        attributeName="opacity"
-        from="0" to="1" dur="0.8s"
-        values="0; 0; 0; 0; 0; 0; 1; 1; 0"
-        keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1"
-        repeatCount="indefinite"
-        id="blfade"
-        />
-
-
-
-
-
-
-
-
+/>
+<animate
+  xlink:href="#top_right"
+  attributeName="opacity"
+  from="0" to="1" dur="0.8s"
+  values="0; 0; 1; 1; 0; 0; 0; 0; 0"
+  keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1"
+  repeatCount="indefinite"
+  id="trfade"
+/>
+<animate
+  xlink:href="#bottom_right"
+  attributeName="opacity"
+  from="0" to="1" dur="0.8s"
+  values="0; 0; 0; 0; 1; 1; 0; 0; 0"
+  keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1"
+  repeatCount="indefinite"
+  id="brfade"
+/>
+<animate
+  xlink:href="#bottom_left"
+  attributeName="opacity"
+  from="0" to="1" dur="0.8s"
+  values="0; 0; 0; 0; 0; 0; 1; 1; 0"
+  keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1"
+  repeatCount="indefinite"
+  id="blfade"
+/>
 </svg>