From 5c8faca620a849500d1f9ff8b1591eee574833a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Mon, 9 Jan 2023 16:46:28 +0800
Subject: [PATCH] fix: display follow text when loading relationship

---
 components/account/AccountFollowButton.vue | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/components/account/AccountFollowButton.vue b/components/account/AccountFollowButton.vue
index d64653e6..bd073df5 100644
--- a/components/account/AccountFollowButton.vue
+++ b/components/account/AccountFollowButton.vue
@@ -60,18 +60,14 @@ useCommand({
 })
 
 const buttonStyle = $computed(() => {
-  // Skeleton while loading, avoid primary color flash
-  if (!relationship)
-    return 'text-inverted'
-
-  if (relationship.blocking)
+  if (relationship?.blocking)
     return 'text-inverted bg-red border-red'
 
-  if (relationship.muting)
+  if (relationship?.muting)
     return 'text-base bg-code border-base'
 
   // If following, use a label style with a strong border for Mutuals
-  if (relationship.following)
+  if (relationship?.following)
     return `text-base ${relationship.followedBy ? 'border-strong' : 'border-base'}`
 
   // If not following, use a button style
@@ -99,7 +95,7 @@ const buttonStyle = $computed(() => {
       <span hidden group-hover="inline">{{ $t('account.unmute') }}</span>
     </template>
     <template v-else-if="relationship?.following">
-      <span group-hover="hidden">{{ relationship?.followedBy ? $t('account.mutuals') : $t('account.following') }}</span>
+      <span group-hover="hidden">{{ relationship.followedBy ? $t('account.mutuals') : $t('account.following') }}</span>
       <span hidden group-hover="inline">{{ $t('account.unfollow') }}</span>
     </template>
     <template v-else-if="relationship?.requested">