perf: improve perf on rendering long list of replies (#1201)

This commit is contained in:
Daniel Roe 2023-01-16 00:33:07 +00:00 committed by GitHub
parent fe07c7effe
commit b9d998bca5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 14 deletions

View file

@ -1,4 +1,6 @@
<script setup lang="ts">
// @ts-expect-error missing types
import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller'
import type { ComponentPublicInstance } from 'vue'
definePageMeta({
@ -17,13 +19,13 @@ const publishWidget = ref()
const { data: status, pending, refresh: refreshStatus } = useAsyncData(
`status:${id}`,
() => fetchStatus(id),
{ watch: [isHydrated], immediate: isHydrated.value },
{ watch: [isHydrated], immediate: isHydrated.value, default: () => shallowRef() },
)
const { client } = $(useMasto())
const { data: context, pending: pendingContext, refresh: refreshContext } = useAsyncData(
`context:${id}`,
async () => client.v1.statuses.fetchContext(id),
{ watch: [isHydrated], immediate: isHydrated.value },
{ watch: [isHydrated], immediate: isHydrated.value, lazy: true, default: () => shallowRef() },
)
const replyDraft = $computed(() => status.value ? getReplyDraft(status.value) : null)
@ -90,16 +92,25 @@ onReactivated(() => {
@published="refreshContext()"
/>
<template v-for="(comment, di) of context?.descendants" :key="comment.id">
<TimelineSkeleton v-if="pendingContext" />
<DynamicScroller
v-slot="{ item, index, active }"
:items="context?.descendants || []"
:min-item-size="200"
key-field="id"
page-mode
>
<DynamicScrollerItem :item="item" :active="active">
<StatusCard
:status="comment"
:status="item"
context="account"
:older="context?.descendants[di + 1]"
:newer="context?.descendants[di - 1]"
:has-newer="di === 0"
:older="context?.descendants[index + 1]"
:newer="context?.descendants[index - 1]"
:has-newer="index === 0"
:main="status"
/>
</template>
</DynamicScrollerItem>
</DynamicScroller>
</div>
<StatusNotFound v-else :account="route.params.account as string" :status="id" />

View file

@ -8,7 +8,7 @@ const accountName = $(computedEager(() => toShortHandle(params.account as string
const { t } = useI18n()
const { data: account, pending, refresh } = $(await useAsyncData(() => fetchAccountByHandle(accountName).catch(() => null), { immediate: process.client }))
const { data: account, pending, refresh } = $(await useAsyncData(() => fetchAccountByHandle(accountName).catch(() => null), { immediate: process.client, default: () => shallowRef() }))
const relationship = $computed(() => account ? useRelationship(account).value : undefined)
onReactivated(() => {

View file

@ -7,7 +7,7 @@ const params = useRoute().params
const tagName = $(computedEager(() => params.tag as string))
const { client } = $(useMasto())
const { data: tag, refresh } = $(await useAsyncData(() => client.v1.tags.fetch(tagName)))
const { data: tag, refresh } = $(await useAsyncData(() => client.v1.tags.fetch(tagName), { default: () => shallowRef() }))
const paginator = client.v1.timelines.listHashtag(tagName)
const stream = useStreaming(client => client.v1.stream.streamTagTimeline(tagName))