From 4595aeeed8906af1e699fa11fd372df30d63eaaa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ant=C3=A9rio=20Vieira=20da=20Silva?=
 <anteriovieira@gmail.com>
Date: Fri, 19 May 2017 16:48:18 -0300
Subject: [PATCH] Rotate refresh icon

---
 src/devtools/App.vue     | 8 +++++++-
 src/devtools/global.styl | 7 +++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/devtools/App.vue b/src/devtools/App.vue
index 285bc401a..8bb35f02c 100644
--- a/src/devtools/App.vue
+++ b/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')
diff --git a/src/devtools/global.styl b/src/devtools/global.styl
index 39c717de3..6a6e9e222 100644
--- a/src/devtools/global.styl
+++ b/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)
+    
\ No newline at end of file