From c0a03f779c4869398b536fbc80f75b516f7aaaba Mon Sep 17 00:00:00 2001
From: Zbynek Konecny <zbynek1729@gmail.com>
Date: Sat, 6 Nov 2021 21:42:30 +0100
Subject: [PATCH] Use CSS animation for console progress (#5871)

---
 .../resources/hudson/model/Run/console.jelly  |  4 +-
 .../hudson/model/TaskAction/log.jelly         |  2 +-
 .../hudson/slaves/SlaveComputer/log.jelly     |  2 +-
 .../log.groovy                                |  2 +-
 .../lib/layout/progressAnimation.jelly        |  8 +++
 war/src/main/less/base-styles-v2.less         |  1 +
 .../main/less/modules/progress-animation.less | 58 +++++++++++++++++++
 7 files changed, 72 insertions(+), 5 deletions(-)
 create mode 100644 core/src/main/resources/lib/layout/progressAnimation.jelly
 create mode 100644 war/src/main/less/modules/progress-animation.less

diff --git a/core/src/main/resources/hudson/model/Run/console.jelly b/core/src/main/resources/hudson/model/Run/console.jelly
index f5c7b4ec362e..d77128466612 100644
--- a/core/src/main/resources/hudson/model/Run/console.jelly
+++ b/core/src/main/resources/hudson/model/Run/console.jelly
@@ -51,8 +51,8 @@ THE SOFTWARE.
         <!-- Do progressive console output -->
         <j:when test="${it.isLogUpdated()}">
           <pre id="out" class="console-output" />
-            <div id="spinner" style="margin-top: 1rem;">
-              <l:spinner />
+            <div id="spinner">
+              <l:progressAnimation/>
             </div>
           <t:progressiveText href="logText/progressiveHtml" idref="out" spinner="spinner"
                startOffset="${offset}" onFinishEvent="jenkins:consoleFinished"/>
diff --git a/core/src/main/resources/hudson/model/TaskAction/log.jelly b/core/src/main/resources/hudson/model/TaskAction/log.jelly
index 820625fcc08e..7011f6d56c70 100644
--- a/core/src/main/resources/hudson/model/TaskAction/log.jelly
+++ b/core/src/main/resources/hudson/model/TaskAction/log.jelly
@@ -32,7 +32,7 @@ THE SOFTWARE.
     <j:when test="${it.workerThread.running}">
       <pre id="out" />
       <div id="spinner">
-        <l:spinner />
+        <l:progressAnimation />
       </div>
       <t:progressiveText href="progressiveHtml" idref="out" spinner="spinner" />
     </j:when>
diff --git a/core/src/main/resources/hudson/slaves/SlaveComputer/log.jelly b/core/src/main/resources/hudson/slaves/SlaveComputer/log.jelly
index aad362b85189..6fb706fd701f 100644
--- a/core/src/main/resources/hudson/slaves/SlaveComputer/log.jelly
+++ b/core/src/main/resources/hudson/slaves/SlaveComputer/log.jelly
@@ -29,7 +29,7 @@ THE SOFTWARE.
     <l:main-panel>
       <pre id="out" />
       <div id="spinner">
-        <l:spinner />
+        <l:progressAnimation />
       </div>
       <t:progressiveText href="logText/progressiveHtml" idref="out" spinner="spinner" />
       <!-- TODO dubious value: INFO+ shown in logText anyway; FINE- configured in /log/*/ maybe better viewed there
diff --git a/core/src/main/resources/jenkins/management/AsynchronousAdministrativeMonitor/log.groovy b/core/src/main/resources/jenkins/management/AsynchronousAdministrativeMonitor/log.groovy
index 8401818f2dd9..2afa31b94162 100644
--- a/core/src/main/resources/jenkins/management/AsynchronousAdministrativeMonitor/log.groovy
+++ b/core/src/main/resources/jenkins/management/AsynchronousAdministrativeMonitor/log.groovy
@@ -33,7 +33,7 @@ l.layout {
         if (my.isFixingActive()) {
             pre(id: "out")
             div(id: "spinner") {
-                l.spinner()
+                l.progessAnimation()
             }
             t.progressiveText(spinner: "spinner", href: "logText/progressiveHtml", idref: "out")
         } else {
diff --git a/core/src/main/resources/lib/layout/progressAnimation.jelly b/core/src/main/resources/lib/layout/progressAnimation.jelly
new file mode 100644
index 000000000000..1acc39a8c3af
--- /dev/null
+++ b/core/src/main/resources/lib/layout/progressAnimation.jelly
@@ -0,0 +1,8 @@
+<?jelly escape-by-default='true'?>
+<j:jelly xmlns:j="jelly:core">
+
+<style>
+
+</style>
+<div class="lds-ellipsis"><div></div><div></div><div></div></div>
+</j:jelly>
\ No newline at end of file
diff --git a/war/src/main/less/base-styles-v2.less b/war/src/main/less/base-styles-v2.less
index 70dabfd03a6c..83be8289ef9d 100644
--- a/war/src/main/less/base-styles-v2.less
+++ b/war/src/main/less/base-styles-v2.less
@@ -33,6 +33,7 @@ html {
 @import './modules/side-panel-tasks.less';
 @import './modules/side-panel-widgets.less';
 @import './modules/spinner.less';
+@import './modules/progress-animation.less';
 @import './modules/tabs.less';
 @import './modules/tooltips.less';
 @import './modules/panes-and-bigtable.less';
diff --git a/war/src/main/less/modules/progress-animation.less b/war/src/main/less/modules/progress-animation.less
new file mode 100644
index 000000000000..ba0d40868528
--- /dev/null
+++ b/war/src/main/less/modules/progress-animation.less
@@ -0,0 +1,58 @@
+/** Original source from loading.io, published under CC0 license */
+
+ .lds-ellipsis {
+    display: inline-block;
+    position: relative;
+    width: 12rem;
+    height: 2.5rem;
+}
+.lds-ellipsis div {
+    position: absolute;
+    top: 1rem;
+    width: .5rem;
+    height: .5rem;
+    border-radius: 50%;
+    background: black; /* fallback for IE11 */
+    background: var(--text-color-secondary);
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+.lds-ellipsis div:nth-child(1) {
+    left: 1rem;
+    animation: lds-ellipsis1 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(2) {
+    left: 1rem;
+    animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(3) {
+    left: 4rem;
+    animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(4) {
+    left: 10rem;
+    animation: lds-ellipsis3 0.6s infinite;
+}
+@keyframes lds-ellipsis1 {
+    0% {
+        transform: scale(0);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+@keyframes lds-ellipsis3 {
+    0% {
+        transform: scale(1);
+    }
+    100% {
+        transform: scale(0);
+    }
+}
+@keyframes lds-ellipsis2 {
+    0% {
+        transform: translate(0, 0);
+    }
+    100% {
+        transform: translate(3rem, 0);
+    }
+}
\ No newline at end of file