From 1c8e48bee4c789a048033e367dccea40b098e3a9 Mon Sep 17 00:00:00 2001
From: TAKAHASHI Shuuji <shuuji3@gmail.com>
Date: Sun, 10 Mar 2024 03:44:44 +0900
Subject: [PATCH] fix: show loading spinner on follow button while fetching
 account relationship (#2667)

Co-authored-by: patak <583075+patak-dev@users.noreply.github.com>
---
 components/account/AccountFollowButton.vue | 50 +++++++++++++---------
 1 file changed, 30 insertions(+), 20 deletions(-)

diff --git a/components/account/AccountFollowButton.vue b/components/account/AccountFollowButton.vue
index b67b9ae3..3ecd3c20 100644
--- a/components/account/AccountFollowButton.vue
+++ b/components/account/AccountFollowButton.vue
@@ -13,6 +13,7 @@ const { t } = useI18n()
 const isSelf = useSelfAccount(() => account)
 const enable = computed(() => !isSelf.value && currentUser.value)
 const relationship = computed(() => props.relationship || useRelationship(account).value)
+const isLoading = computed(() => relationship.value === undefined)
 
 const { client } = useMasto()
 
@@ -62,6 +63,10 @@ const buttonStyle = computed(() => {
   if (relationship.value ? relationship.value.following : context === 'following')
     return `text-base ${relationship.value?.followedBy ? 'border-strong' : 'border-base'}`
 
+  // If loading, use a plain style
+  if (isLoading.value)
+    return 'text-base border-base'
+
   // If not following, use a button style
   return 'text-inverted bg-primary border-primary'
 })
@@ -77,28 +82,33 @@ const buttonStyle = computed(() => {
     :hover="!relationship?.blocking && !relationship?.muting && relationship?.following ? 'border-red text-red' : 'bg-base border-primary text-primary'"
     @click="relationship?.blocking ? unblock() : relationship?.muting ? unmute() : toggleFollowAccount(relationship!, account)"
   >
-    <template v-if="relationship?.blocking">
-      <span elk-group-hover="hidden">{{ $t('account.blocking') }}</span>
-      <span hidden elk-group-hover="inline">{{ $t('account.unblock') }}</span>
-    </template>
-    <template v-if="relationship?.muting">
-      <span elk-group-hover="hidden">{{ $t('account.muting') }}</span>
-      <span hidden elk-group-hover="inline">{{ $t('account.unmute') }}</span>
-    </template>
-    <template v-else-if="relationship ? relationship.following : context === 'following'">
-      <span elk-group-hover="hidden">{{ relationship?.followedBy ? $t('account.mutuals') : $t('account.following') }}</span>
-      <span hidden elk-group-hover="inline">{{ $t('account.unfollow') }}</span>
-    </template>
-    <template v-else-if="relationship?.requested">
-      <span elk-group-hover="hidden">{{ $t('account.follow_requested') }}</span>
-      <span hidden elk-group-hover="inline">{{ $t('account.withdraw_follow_request') }}</span>
-    </template>
-    <template v-else-if="relationship ? relationship.followedBy : context === 'followedBy'">
-      <span elk-group-hover="hidden">{{ $t('account.follows_you') }}</span>
-      <span hidden elk-group-hover="inline">{{ account.locked ? $t('account.request_follow') : $t('account.follow_back') }}</span>
+    <template v-if="isLoading">
+      <span i-svg-spinners-180-ring-with-bg />
     </template>
     <template v-else>
-      <span>{{ account.locked ? $t('account.request_follow') : $t('account.follow') }}</span>
+      <template v-if="relationship?.blocking">
+        <span elk-group-hover="hidden">{{ $t('account.blocking') }}</span>
+        <span hidden elk-group-hover="inline">{{ $t('account.unblock') }}</span>
+      </template>
+      <template v-if="relationship?.muting">
+        <span elk-group-hover="hidden">{{ $t('account.muting') }}</span>
+        <span hidden elk-group-hover="inline">{{ $t('account.unmute') }}</span>
+      </template>
+      <template v-else-if="relationship ? relationship.following : context === 'following'">
+        <span elk-group-hover="hidden">{{ relationship?.followedBy ? $t('account.mutuals') : $t('account.following') }}</span>
+        <span hidden elk-group-hover="inline">{{ $t('account.unfollow') }}</span>
+      </template>
+      <template v-else-if="relationship?.requested">
+        <span elk-group-hover="hidden">{{ $t('account.follow_requested') }}</span>
+        <span hidden elk-group-hover="inline">{{ $t('account.withdraw_follow_request') }}</span>
+      </template>
+      <template v-else-if="relationship ? relationship.followedBy : context === 'followedBy'">
+        <span elk-group-hover="hidden">{{ $t('account.follows_you') }}</span>
+        <span hidden elk-group-hover="inline">{{ account.locked ? $t('account.request_follow') : $t('account.follow_back') }}</span>
+      </template>
+      <template v-else>
+        <span>{{ account.locked ? $t('account.request_follow') : $t('account.follow') }}</span>
+      </template>
     </template>
   </button>
 </template>