bug/JENKINS-45082 ms edge loading svg doesn't animate (#1430)

* for the loading wheels animations, change css keyframe transformations to js based svg transform atributes * release beta version of core-js and the JDL * fix core-js deps * change variable name, fix cancelAnimationFrame call * release new beta versions of the jdl and core-js * release new ver of core-js and jdl * tip up core-js and jdl versions
jenkinsci · Sep 28, 2017 · 42f55a9 · 42f55a9
1 parent 2f1ca2c
commit 42f55a9
Show file tree

Hide file tree

Showing 13 changed files with 73 additions and 873 deletions.
diff --git a/blueocean-core-js/npm-shrinkwrap.json b/blueocean-core-js/npm-shrinkwrap.json
diff --git a/blueocean-core-js/package.json b/blueocean-core-js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jenkins-cd/blueocean-core-js",
-  "version": "0.0.166-SNAPSHOT",
+  "version": "0.0.167-SNAPSHOT",
   "description": "Shared JavaScript libraries for use with Jenkins Blue Ocean",
   "main": "dist/js/index.js",
   "scripts": {
@@ -32,7 +32,7 @@
     "url": "https://github.com/jenkinsci/blueocean-plugin.git"
   },
   "dependencies": {
-    "@jenkins-cd/design-language": "0.0.154",
+    "@jenkins-cd/design-language": "0.0.155",
     "@jenkins-cd/js-extensions": "0.0.39",
     "@jenkins-cd/js-modules": "0.0.10",
     "@jenkins-cd/logging": "0.0.6",

diff --git a/blueocean-dashboard/npm-shrinkwrap.json b/blueocean-dashboard/npm-shrinkwrap.json
diff --git a/blueocean-dashboard/package.json b/blueocean-dashboard/package.json
@@ -43,8 +43,8 @@
     "skin-deep": "0.16.0"
   },
   "dependencies": {
-    "@jenkins-cd/blueocean-core-js": "0.0.165",
-    "@jenkins-cd/design-language": "0.0.154",
+    "@jenkins-cd/blueocean-core-js": "0.0.166",
+    "@jenkins-cd/design-language": "0.0.155",
     "@jenkins-cd/js-extensions": "0.0.39",
     "@jenkins-cd/js-modules": "0.0.10",
     "@jenkins-cd/preferences": "0.0.4",

diff --git a/blueocean-personalization/npm-shrinkwrap.json b/blueocean-personalization/npm-shrinkwrap.json
diff --git a/blueocean-personalization/package.json b/blueocean-personalization/package.json
@@ -39,8 +39,8 @@
     "react-addons-test-utils": "15.3.2"
   },
   "dependencies": {
-    "@jenkins-cd/blueocean-core-js": "0.0.165",
-    "@jenkins-cd/design-language": "0.0.154",
+    "@jenkins-cd/blueocean-core-js": "0.0.166",
+    "@jenkins-cd/design-language": "0.0.155",
     "@jenkins-cd/js-extensions": "0.0.39",
     "@jenkins-cd/js-modules": "0.0.10",
     "immutable": "3.8.1",

diff --git a/blueocean-pipeline-editor/npm-shrinkwrap.json b/blueocean-pipeline-editor/npm-shrinkwrap.json
diff --git a/blueocean-pipeline-editor/package.json b/blueocean-pipeline-editor/package.json
@@ -41,8 +41,8 @@
     "react-addons-test-utils": "15.3.2"
   },
   "dependencies": {
-    "@jenkins-cd/blueocean-core-js": "0.0.165",
-    "@jenkins-cd/design-language": "0.0.154",
+    "@jenkins-cd/blueocean-core-js": "0.0.166",
+    "@jenkins-cd/design-language": "0.0.155",
     "@jenkins-cd/js-extensions": "0.0.39",
     "@jenkins-cd/js-modules": "0.0.10",
     "lodash.debounce": "4.0.8",

diff --git a/blueocean-web/npm-shrinkwrap.json b/blueocean-web/npm-shrinkwrap.json
diff --git a/blueocean-web/package.json b/blueocean-web/package.json
@@ -30,8 +30,8 @@
     "zombie": "4.2.1"
   },
   "dependencies": {
-    "@jenkins-cd/blueocean-core-js": "0.0.165",
-    "@jenkins-cd/design-language": "0.0.154",
+    "@jenkins-cd/blueocean-core-js": "0.0.166",
+    "@jenkins-cd/design-language": "0.0.155",
     "@jenkins-cd/js-extensions": "0.0.39",
     "@jenkins-cd/js-modules": "0.0.10",
     "history": "2.0.2",

diff --git a/jenkins-design-language/less/theme.less b/jenkins-design-language/less/theme.less
@@ -723,62 +723,6 @@ footer {
     top: 10px;
 }
 
-.spin {
-    -webkit-animation-name: spin;
-    -webkit-animation-duration: 4000ms;
-    -webkit-animation-iteration-count: infinite;
-    -webkit-animation-timing-function: linear;
-    -moz-animation-name: spin;
-    -moz-animation-duration: 4000ms;
-    -moz-animation-iteration-count: infinite;
-    -moz-animation-timing-function: linear;
-    -ms-animation-name: spin;
-    -ms-animation-duration: 4000ms;
-    -ms-animation-iteration-count: infinite;
-    -ms-animation-timing-function: linear;
-
-    animation-name: spin;
-    animation-duration: 4000ms;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
-}
-
-@-ms-keyframes spin {
-    from {
-        -ms-transform: rotate(0deg);
-    }
-    to {
-        -ms-transform: rotate(360deg);
-    }
-}
-
-@-moz-keyframes spin {
-    from {
-        -moz-transform: rotate(0deg);
-    }
-    to {
-        -moz-transform: rotate(360deg);
-    }
-}
-
-@-webkit-keyframes spin {
-    from {
-        -webkit-transform: rotate(0deg);
-    }
-    to {
-        -webkit-transform: rotate(360deg);
-    }
-}
-
-@keyframes spin {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
-}
-
 .left {
     float: left;
 }

diff --git a/jenkins-design-language/package.json b/jenkins-design-language/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@jenkins-cd/design-language",
   "jdlName": "jenkins-design-language",
-  "version": "0.0.155-SNAPSHOT",
+  "version": "0.0.156-SNAPSHOT",
   "description": "Styles, assets, and React classes for Jenkins Design Language",
   "main": "dist/js/components/index.js",
   "scripts": {

diff --git a/jenkins-design-language/src/js/components/status/SvgSpinner.jsx b/jenkins-design-language/src/js/components/status/SvgSpinner.jsx
@@ -6,6 +6,33 @@ import { describeArcAsPath } from '../SVG';
 export const strokeWidth = 3.5; // px. Maybe we can fetch this from CSS at runtime in the future
 
 export default class SvgSpinner extends Component {
+    componentWillMount() {
+        this.infiniteRotationRunning = false;
+        this.setState({
+            infiniteRotateDegrees: 0
+        });
+    }
+
+    infiniteLoadingTimer = () => {
+        let infiniteRotateDegrees = this.state.infiniteRotateDegrees;
+
+        infiniteRotateDegrees += 1.5;
+
+        if (infiniteRotateDegrees >= 360) {
+            infiniteRotateDegrees = 0;
+        }
+
+        this.setState({
+            infiniteRotateDegrees: infiniteRotateDegrees
+        });
+
+        this.requestAnimationFrameId = requestAnimationFrame(this.infiniteLoadingTimer);
+    }
+
+    componentWillUnmount() {
+        cancelAnimationFrame(this.requestAnimationFrameId);
+    }
+
     render() {
 
         const {result} = this.props;
@@ -30,6 +57,12 @@ export default class SvgSpinner extends Component {
         else if (percentage > 100) {
             groupClasses.push('spin');
             percentage = 25;
+
+            if (!this.infiniteRotationRunning) {
+                requestAnimationFrame(this.infiniteLoadingTimer);
+
+                this.infiniteRotationRunning = true;
+            }
         }
 
         const rotate = percentage / 100 * 360;
@@ -38,7 +71,7 @@ export default class SvgSpinner extends Component {
         const innerRadius = radius / 3;
 
         return (
-            <g className={groupClasses.join(' ')}>
+            <g className={groupClasses.join(' ')} transform={`rotate(${this.state.infiniteRotateDegrees})`} >
                 <circle cx="0" cy="0" r={radius} strokeWidth={strokeWidth}/>
                 <circle className="inner" cx="0" cy="0" r={innerRadius} />
                 { percentage ? <path className={result} fill="none" strokeWidth={strokeWidth} d={d}/> : null}