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)" > - - - - -