feat(ui): fetch account data on demand (#2632)

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<mastodon.v1.Account | null | undefined>(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()
 </script>
 
 <template>
-  <span ref="hoverCard">
-    <VMenu v-if="!disabled && account && !getPreferences(userSettings, 'hideAccountHoverCard')" placement="bottom-start" :delay="{ show: 500, hide: 100 }" v-bind="$attrs" :close-on-content-click="false">
+  <span ref="accountHover">
+    <VMenu
+      v-if="!disabled && account && !getPreferences(userSettings, 'hideAccountHoverCard')"
+      placement="bottom-start"
+      :delay="{ show: 500, hide: 100 }"
+      v-bind="$attrs"
+      :close-on-content-click="false"
+    >
       <slot />
       <template #popper>
         <AccountHoverCard v-if="account" :account="account" />