fix bouncing / spinning

src/app/tabs/compile-tab.js

@@ -76,6 +76,12 @@ class CompileTab extends CompilerApi {
    */
 
   listenToEvents () {
+    let onContentChanged = () => {
+      this.events.emit('statusChanged', {key: 'code', title: 'content changed, needs recompilation', type: 'info'})
+    }
+    this.editor.event.register('contentChanged', onContentChanged)
+    this.editor.event.register('sessionSwitched', onContentChanged)
+
     this.compiler.event.register('loadingCompiler', () => {
       this.events.emit('statusChanged', {key: 'spinner', title: 'loading compiler...', type: 'info'})
     })
@@ -84,7 +90,7 @@ class CompileTab extends CompilerApi {
       this.events.emit('statusChanged', {key: '', title: '', type: ''})
     })
 
-    this.compiler.event.register('compilationStarted', () => {
+    this.compileTabLogic.event.on('startingCompilation', () => {
       if (this._view.errorContainer) {
         this._view.errorContainer.innerHTML = ''
       }
@@ -93,10 +99,12 @@ class CompileTab extends CompilerApi {
 
     this.fileManager.events.on('currentFileChanged', (name) => {
       this.compilerContainer.currentFile = name
+      onContentChanged()
     })
 
     this.fileManager.events.on('noFileSelected', () => {
       this.compilerContainer.currentFile = ''
+      onContentChanged()
     })
 
     this.compiler.event.register('compilationFinished', (success, data, source) => {

src/app/tabs/compileTab/compileTab.js

@@ -1,4 +1,5 @@
 const async = require('async')
+const EventEmitter = require('events')
 var remixTests = require('remix-tests')
 var Compiler = require('remix-solidity').Compiler
 var CompilerImport = require('../../compiler/compiler-imports')
@@ -9,6 +10,7 @@ const addTooltip = require('../../ui/tooltip')
 class CompileTab {
 
   constructor (queryParams, fileManager, editor, config, fileProviders) {
+    this.event = new EventEmitter()
     this.queryParams = queryParams
     this.compilerImport = new CompilerImport()
     this.compiler = new Compiler((url, cb) => this.importFileCb(url, cb))
@@ -45,7 +47,11 @@ class CompileTab {
     provider.get(target, (error, content) => {
       if (error) return console.log(error)
       sources[target] = { content }
+      this.event.emit('startingCompilation')
+      setTimeout(() => {
+        // setTimeout fix the animation on chrome... (animation triggered by 'staringCompilation')
         this.compiler.compile(sources, target)
+      }, 100)
     })
   }
 

src/app/tabs/compileTab/compilerContainer.js

@@ -47,6 +47,13 @@ class CompilerContainer {
     this.editor.event.register('contentChanged', this.scheduleCompilation.bind(this))
     this.editor.event.register('sessionSwitched', this.scheduleCompilation.bind(this))
 
+    this.compileTabLogic.event.on('startingCompilation', () => {
+      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.compileTabLogic.compiler.event.register('compilationDuration', (speed) => {
       if (!this._view.warnCompilationSlow) return
       if (speed > 1000) {
@@ -70,13 +77,6 @@ class CompilerContainer {
       this._view.warnCompilationSlow.style.visibility = 'hidden'
     })
 
-    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.compileTabLogic.compiler.event.register('compilerLoaded', () => {
       if (!this._view.compileIcon) return
       this._view.compileIcon.setAttribute('title', '')