From 399712c0c77ec881f5c4fec8e1306b2a4c92320a Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Fri, 2 Dec 2022 22:58:30 +0100
Subject: [PATCH] feat: improve follow button while loading

---
 components/account/AccountFollowButton.vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/components/account/AccountFollowButton.vue b/components/account/AccountFollowButton.vue
index 602a7e1a..b02aef00 100644
--- a/components/account/AccountFollowButton.vue
+++ b/components/account/AccountFollowButton.vue
@@ -31,6 +31,19 @@ useCommand({
   icon: 'i-ri:star-line',
   onActivate: () => toggleFollow(),
 })
+
+const buttonStyle = $computed(() => {
+  // Skeleton while loading, avoid primary color flash
+  if (!relationship)
+    return 'text-inverted'
+
+  // If following, use a label style with a strong border for Mutuals
+  if (relationship.following)
+    return `text-base ${relationship.followedBy ? 'border-strong' : 'border-base'}`
+
+  // If not following, use a button style
+  return 'text-inverted bg-primary border-primary'
+})
 </script>
 
 <template>
@@ -39,7 +52,7 @@ useCommand({
     gap-1 items-center group
     :disabled="relationship?.requested"
     border-1
-    rounded-full flex="~ gap2 center" font-500 w-30 h-fit py1 :class="relationship?.following ? (`text-base ${relationship?.followedBy ? 'border-strong' : 'border-base'}`) : 'text-inverted bg-primary border-primary'" :hover="relationship?.following ? 'border-red text-red' : 'bg-base border-primary text-primary'" @click="toggleFollow"
+    rounded-full flex="~ gap2 center" font-500 w-30 h-fit py1 :class="buttonStyle" :hover="relationship?.following ? 'border-red text-red' : 'bg-base border-primary text-primary'" @click="toggleFollow"
   >
     <template v-if="relationship?.following">
       <span group-hover="hidden">{{ relationship?.followedBy ? $t('account.mutuals') : $t('account.following') }}</span>