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)"
>
-
- {{ $t('account.blocking') }}
- {{ $t('account.unblock') }}
-
-
- {{ $t('account.muting') }}
- {{ $t('account.unmute') }}
-
-
- {{ relationship?.followedBy ? $t('account.mutuals') : $t('account.following') }}
- {{ $t('account.unfollow') }}
-
-
- {{ $t('account.follow_requested') }}
- {{ $t('account.withdraw_follow_request') }}
-
-
- {{ $t('account.follows_you') }}
- {{ account.locked ? $t('account.request_follow') : $t('account.follow_back') }}
+
+
- {{ account.locked ? $t('account.request_follow') : $t('account.follow') }}
+
+ {{ $t('account.blocking') }}
+ {{ $t('account.unblock') }}
+
+
+ {{ $t('account.muting') }}
+ {{ $t('account.unmute') }}
+
+
+ {{ relationship?.followedBy ? $t('account.mutuals') : $t('account.following') }}
+ {{ $t('account.unfollow') }}
+
+
+ {{ $t('account.follow_requested') }}
+ {{ $t('account.withdraw_follow_request') }}
+
+
+ {{ $t('account.follows_you') }}
+ {{ account.locked ? $t('account.request_follow') : $t('account.follow_back') }}
+
+
+ {{ account.locked ? $t('account.request_follow') : $t('account.follow') }}
+