2 files changed, 16 insertions, 3 deletions
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index bab1a654..d7fe71d0 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -1,6 +1,6 @@
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import RemoteFollow from '../remote_follow/remote_follow.vue'
-import SubscribeButton from '../subscribe_button/subscribe_button.vue'
+import ProgressButton from '../progress_button/progress_button.vue'
 import ModerationTools from '../moderation_tools/moderation_tools.vue'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
 import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
@@ -106,7 +106,7 @@ export default {
     UserAvatar,
     RemoteFollow,
     ModerationTools,
-    SubscribeButton
+    ProgressButton
   },
   methods: {
     followUser () {
@@ -137,6 +137,12 @@ export default {
     unmuteUser () {
       this.$store.dispatch('unmuteUser', this.user.id)
     },
+    subscribeUser () {
+      return this.$store.state.api.backendInteractor.subscribeUser(this.user.id)
+    },
+    unsubscribeUser () {
+      return this.$store.state.api.backendInteractor.unsubscribeUser(this.user.id)
+    },
     setProfileView (v) {
       if (this.switcher) {
         const store = this.$store
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 18ec6e94..e1d3f48f 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -72,7 +72,14 @@
             </button>
           </span>
         </div>
-        <SubscribeButton :user="user" />
+        <div>
+          <ProgressButton :click="subscribeUser" v-if="!user.subscribing">
+            Subscribe
+          </ProgressButton>
+          <ProgressButton class="pressed" :click="unsubscribeUser" v-else>
+            Subscribing!
+          </ProgressButton>
+        </div>
         <div class='mute' v-if='isOtherUser && loggedIn'>
           <span v-if='user.muted'>
             <button @click="unmuteUser" class="pressed">