fix(ui): avoid fetching status account in replying to until visible (#2638)

zio/stable
Joaquín Sánchez 2024-03-04 20:55:02 +01:00 committed by GitHub
parent 308b50cbad
commit 9f04e17e57
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 40 additions and 6 deletions

View File

@ -1,21 +1,55 @@
<script setup lang="ts"> <script setup lang="ts">
import type { mastodon } from 'masto' import type { mastodon } from 'masto'
import { fetchAccountById } from '~/composables/cache'
const { type WatcherType = [status?: mastodon.v1.Status, v?: boolean]
status,
isSelfReply = false, const props = defineProps<{
} = defineProps<{
status: mastodon.v1.Status status: mastodon.v1.Status
isSelfReply: boolean isSelfReply: boolean
}>() }>()
const isSelf = computed(() => status.inReplyToAccountId === status.account.id) const link = ref()
const account = isSelf.value ? computed(() => status.account) : useAccountById(status.inReplyToAccountId) const targetIsVisible = ref(false)
const isSelf = computed(() => props.status.inReplyToAccountId === props.status.account.id)
const account = ref<mastodon.v1.Account | null | undefined>(isSelf.value ? props.status.account : undefined)
useIntersectionObserver(
link,
([{ intersectionRatio }]) => {
targetIsVisible.value = intersectionRatio > 0.1
},
)
watch(
() => [props.status, targetIsVisible.value] satisfies WatcherType,
([newStatus, newVisible]) => {
if (newStatus.account) {
account.value = newStatus.account
return
}
if (!newVisible)
return
const newId = newStatus.inReplyToAccountId
if (newId) {
fetchAccountById(newStatus.inReplyToAccountId).then((acc) => {
if (newId === props.status.inReplyToAccountId)
account.value = acc
})
return
}
account.value = undefined
}, { immediate: true, flush: 'post' },
)
</script> </script>
<template> <template>
<NuxtLink <NuxtLink
v-if="status.inReplyToId" v-if="status.inReplyToId"
ref="link"
flex="~ gap2" items-center h-auto text-sm text-secondary flex="~ gap2" items-center h-auto text-sm text-secondary
:to="getStatusInReplyToRoute(status)" :to="getStatusInReplyToRoute(status)"
:title="$t('status.replying_to', [account ? getDisplayName(account) : $t('status.someone')])" :title="$t('status.replying_to', [account ? getDisplayName(account) : $t('status.someone')])"