From 308b50cbadc911a90e806ca8e85662025f9d781f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= Date: Mon, 4 Mar 2024 20:20:13 +0100 Subject: [PATCH] feat(ui): fetch account data on demand (#2632) --- components/account/AccountHoverWrapper.vue | 32 +++++++++++----------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/components/account/AccountHoverWrapper.vue b/components/account/AccountHoverWrapper.vue index a6c8d815..13ba07e7 100644 --- a/components/account/AccountHoverWrapper.vue +++ b/components/account/AccountHoverWrapper.vue @@ -2,39 +2,33 @@ import type { mastodon } from 'masto' import { fetchAccountByHandle } from '~/composables/cache' -type WatcherType = [acc?: mastodon.v1.Account, h?: string, v?: boolean] +type WatcherType = [acc?: mastodon.v1.Account | null, h?: string, v?: boolean] defineOptions({ inheritAttrs: false, }) const props = defineProps<{ - account?: mastodon.v1.Account + account?: mastodon.v1.Account | null handle?: string disabled?: boolean }>() -const hoverCard = ref() -const targetIsVisible = ref(false) +const accountHover = ref() +const hovered = useElementHover(accountHover) const account = ref(props.account) -useIntersectionObserver( - hoverCard, - ([{ intersectionRatio }]) => { - targetIsVisible.value = intersectionRatio > 0.1 - }, -) watch( - () => [props.account, props.handle, targetIsVisible.value] satisfies WatcherType, + () => [props.account, props.handle, hovered.value] satisfies WatcherType, ([newAccount, newHandle, newVisible], oldProps) => { + if (!newVisible || process.test) + return + if (newAccount) { account.value = newAccount return } - if (!newVisible || process.test) - return - if (newHandle) { const [_oldAccount, oldHandle, _oldVisible] = oldProps ?? [undefined, undefined, false] if (!oldHandle || newHandle !== oldHandle || !account.value) { @@ -56,8 +50,14 @@ const userSettings = useUserSettings()