teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat: improve follow button while loading

Browse source
This commit is contained in:
patak 2022-12-02 22:58:30 +01:00
parent 6ffe3fe02d
commit 399712c0c7
1 changed files with 14 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
components/account/AccountFollowButton.vue
View file

@ -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>