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

@@ -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,6 +82,10 @@ 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="isLoading">
+      <span i-svg-spinners-180-ring-with-bg />
+    </template>
+    <template v-else>
       <template v-if="relationship?.blocking">
         <span elk-group-hover="hidden">{{ $t('account.blocking') }}</span>
         <span hidden elk-group-hover="inline">{{ $t('account.unblock') }}</span>
@@ -100,5 +109,6 @@ const buttonStyle = computed(() => {
       <template v-else>
         <span>{{ account.locked ? $t('account.request_follow') : $t('account.follow') }}</span>
       </template>
+    </template>
   </button>
 </template>