From 459fdaf10fcc55248ec2868963edcba51114c877 Mon Sep 17 00:00:00 2001
From: xj9 <xj9@heropunch.io>
Date: Wed, 8 Mar 2017 21:45:40 -0700
Subject: [PATCH] add a spin animation to favorite and boost actions

---
 src/components/favorite_button/favorite_button.js  | 14 ++++++++++++--
 src/components/favorite_button/favorite_button.vue |  4 +++-
 src/components/retweet_button/retweet_button.js    | 14 ++++++++++++--
 src/components/retweet_button/retweet_button.vue   |  1 +
 4 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/components/favorite_button/favorite_button.js b/src/components/favorite_button/favorite_button.js
index 4ee3890fb3..466e9b848d 100644
--- a/src/components/favorite_button/favorite_button.js
+++ b/src/components/favorite_button/favorite_button.js
@@ -1,5 +1,10 @@
 const FavoriteButton = {
-  props: [ 'status' ],
+  props: ['status'],
+  data () {
+    return {
+      animated: false
+    }
+  },
   methods: {
     favorite () {
       if (!this.status.favorited) {
@@ -7,13 +12,18 @@ const FavoriteButton = {
       } else {
         this.$store.dispatch('unfavorite', {id: this.status.id})
       }
+      this.animated = true
+      setTimeout(() => {
+        this.animated = false
+      }, 500)
     }
   },
   computed: {
     classes () {
       return {
         'icon-star-empty': !this.status.favorited,
-        'icon-star': this.status.favorited
+        'icon-star': this.status.favorited,
+        'animate-spin': this.animated
       }
     }
   }
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index fd53b5055e..0abece31e2 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <i :class='classes' class='favorite-button fa' v-on:click.prevent='favorite()'></i>
+    <i :class='classes' class='favorite-button fa' @click.prevent='favorite()'/>
     <span v-if='status.fave_num > 0'>{{status.fave_num}}</span>
   </div>
 </template>
@@ -10,6 +10,7 @@
 <style lang='scss'>
   .favorite-button {
       cursor: pointer;
+      animation-duration: 0.6s;
       &:hover {
         color: orange;
       }
@@ -17,4 +18,5 @@
   .icon-star {
       color: orange;
   }
+
 </style>
diff --git a/src/components/retweet_button/retweet_button.js b/src/components/retweet_button/retweet_button.js
index e7318dc5f7..2280f315c9 100644
--- a/src/components/retweet_button/retweet_button.js
+++ b/src/components/retweet_button/retweet_button.js
@@ -1,16 +1,26 @@
 const RetweetButton = {
-  props: [ 'status' ],
+  props: ['status'],
+  data () {
+    return {
+      animated: false
+    }
+  },
   methods: {
     retweet () {
       if (!this.status.repeated) {
         this.$store.dispatch('retweet', {id: this.status.id})
       }
+      this.animated = true
+      setTimeout(() => {
+        this.animated = false
+      }, 500)
     }
   },
   computed: {
     classes () {
       return {
-        'retweeted': this.status.repeated
+        'retweeted': this.status.repeated,
+        'animate-spin': this.animated
       }
     }
   }
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index 9b2f5c7b36..5ec85fcff6 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -11,6 +11,7 @@
   @import '../../_variables.scss';
   .icon-retweet {
      cursor: pointer;
+     animation-duration: 0.6s;
      &:hover {
       color: $green;
      }