feat: improve follow button while loading

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>