From fef44f7df09b51a8dc15e51d09a4434ac354f075 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Tue, 16 Apr 2019 22:52:37 +0200
Subject: [PATCH] fix bouncing and spinning

---
 src/app/tabs/compileTab/compilerContainer.js |  8 +-
 src/app/tabs/styles/compile-tab-styles.js    | 84 ++++++++++++++++----
 2 files changed, 71 insertions(+), 21 deletions(-)

diff --git a/src/app/tabs/compileTab/compilerContainer.js b/src/app/tabs/compileTab/compilerContainer.js
index d425891b44..a0f3e2e528 100644
--- a/src/app/tabs/compileTab/compilerContainer.js
+++ b/src/app/tabs/compileTab/compilerContainer.js
@@ -65,29 +65,29 @@ class CompilerContainer {
 
     this.compileTabLogic.compiler.event.register('loadingCompiler', () => {
       if (!this._view.compileIcon) return
+      this._view.compileIcon.setAttribute('title', 'compiler is loading, please wait a few moments.')
       this._view.compileIcon.classList.add(`${css.spinningIcon}`)
       this._view.warnCompilationSlow.style.visibility = 'hidden'
-      this._view.compileIcon.setAttribute('title', 'compiler is loading, please wait a few moments.')
     })
 
     this.compileTabLogic.compiler.event.register('compilationStarted', () => {
       if (!this._view.compileIcon) return
+      this._view.compileIcon.setAttribute('title', 'compiling...')
       this._view.compileIcon.classList.remove(`${css.bouncingIcon}`)
       this._view.compileIcon.classList.add(`${css.spinningIcon}`)
-      this._view.compileIcon.setAttribute('title', 'compiling...')
     })
 
     this.compileTabLogic.compiler.event.register('compilerLoaded', () => {
       if (!this._view.compileIcon) return
-      this._view.compileIcon.classList.remove(`${css.spinningIcon}`)
       this._view.compileIcon.setAttribute('title', '')
+      this._view.compileIcon.classList.remove(`${css.spinningIcon}`)
     })
 
     this.compileTabLogic.compiler.event.register('compilationFinished', (success, data, source) => {
       if (!this._view.compileIcon) return
+      this._view.compileIcon.setAttribute('title', 'idle')
       this._view.compileIcon.classList.remove(`${css.spinningIcon}`)
       this._view.compileIcon.classList.remove(`${css.bouncingIcon}`)
-      this._view.compileIcon.setAttribute('title', 'idle')
     })
   }
 
diff --git a/src/app/tabs/styles/compile-tab-styles.js b/src/app/tabs/styles/compile-tab-styles.js
index d14ca2df52..886b49a820 100644
--- a/src/app/tabs/styles/compile-tab-styles.js
+++ b/src/app/tabs/styles/compile-tab-styles.js
@@ -141,33 +141,83 @@ const css = csjs`
   .icon {
     margin-right: 0.3em;
   }
-  .spinningIcon {
-    margin-right: .3em;
-    animation: spin 2s linear infinite;
-  }
-  .bouncingIcon {
-    margin-right: .3em;
-    animation: bounce 2s infinite;
-  }
   .errorBlobs {
     padding-left: 5px;
     padding-right: 5px;
   }
+
+  .spinningIcon {
+    display: inline-block;
+    position: relative;
+    animation: spin 2s infinite linear;
+    -moz-animation: spin 2s infinite linear;
+    -o-animation: spin 2s infinite linear;
+    -webkit-animation: spin 2s infinite linear;
+  }
   @keyframes spin {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
   }
+  @-webkit-keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+  @-moz-keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+  @-o-keyframes spin {
+     0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+  @-ms-keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+  
+
+  .bouncingIcon {
+    display: inline-block;
+    position: relative;
+    -moz-animation: bounce 2s infinite linear;
+    -o-animation: bounce 2s infinite linear;
+    -webkit-animation: bounce 2s infinite linear;
+    animation: bounce 2s infinite linear;
+  } 
+
   @-webkit-keyframes bounce {
-    0% {
-      margin-bottom: 0;
-    }
-    70% {
-      margin-bottom: 0;
-    }
-    100% {
-      margin-bottom: 0;
-    }
+      0% { top: 0; }
+      50% { top: -0.2em; }
+      70% { top: -0.3em; }
+      100% { top: 0; }
+  }
+  @-moz-keyframes bounce {
+      0% { top: 0; }
+      50% { top: -0.2em; }
+      70% { top: -0.3em; }
+      100% { top: 0; }
+  }
+  @-o-keyframes bounce {
+      0% { top: 0; }
+      50% { top: -0.2em; }
+      70% { top: -0.3em; }
+      100% { top: 0; }
+  }
+  @-ms-keyframes bounce {
+      0% { top: 0; }
+      50% { top: -0.2em; }
+      70% { top: -0.3em; }
+      100% { top: 0; }
+  }
+  @keyframes bounce {
+      0% { top: 0; }
+      50% { top: -0.2em; }
+      70% { top: -0.3em; }
+      100% { top: 0; }
   }
+
+
+
 `
 
 module.exports = css