Rotate refresh icon (#332)

Author: anteriovieira

src/devtools/App.vue

@@ -34,7 +34,7 @@
     <a class="button refresh"
       @click="refresh"
       title="Force Refresh">
-      <i class="material-icons">cached</i>
+      <i class="material-icons" ref="refresh">refresh</i>
       <span class="pane-name">Refresh</span>
     </a>
     <span class="active-bar"></span>
@@ -78,7 +78,13 @@ export default {
       }
     },
     refresh () {
+      let refreshIcon = this.$refs.refresh
+      refreshIcon.style.animation = 'none'
+
       bridge.send('refresh')
+      bridge.once('flush', () => {
+        refreshIcon.style.animation = 'rotate 1s'
+      })
     },
     updateActiveBar () {
       const activeButton = this.$el.querySelector('.button.active')

src/devtools/global.styl

@@ -95,3 +95,10 @@ $arrow-color = #444
     text-align center
     padding 0.5em
     margin 0 auto
+
+@keyframes rotate
+  0%
+    transform rotate(0deg)
+  100%
+    transform rotate(360deg)
+