zio
/
elk
2
0
Fork 0
Code Packages Releases 2 Activity

feat: improve follow button while loading

zio/stable
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', icon: 'i-ri:star-line',
onActivate: () => toggleFollow(), 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> </script>
<template> <template>
@ -39,7 +52,7 @@ useCommand({
gap-1 items-center group gap-1 items-center group
:disabled="relationship?.requested" :disabled="relationship?.requested"
border-1 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"> <template v-if="relationship?.following">
<span group-hover="hidden">{{ relationship?.followedBy ? $t('account.mutuals') : $t('account.following') }}</span> <span group-hover="hidden">{{ relationship?.followedBy ? $t('account.mutuals') : $t('account.following') }}</span>