fix bouncing and spinning

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')
     })
   }
 

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 bounce {
-    0% {
-      margin-bottom: 0;
+  @-webkit-keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+  @-moz-keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
   }
-    70% {
-      margin-bottom: 0;
+  @-o-keyframes spin {
+     0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
   }
-    100% {
-      margin-bottom: 0;
+  @-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% { 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