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

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

zio/stable
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
pages/[[server]]/@[account]/[status].vue
View File

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

2
pages/[[server]]/@[account]/index.vue
View File

@ -8,7 +8,7 @@ const accountName = $(computedEager(() => toShortHandle(params.account as string
const { t } = useI18n() 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) const relationship = $computed(() => account ? useRelationship(account).value : undefined)
onReactivated(() => { onReactivated(() => {

2
pages/[[server]]/tags/[tag].vue
View File

@ -7,7 +7,7 @@ const params = useRoute().params
const tagName = $(computedEager(() => params.tag as string)) const tagName = $(computedEager(() => params.tag as string))
const { client } = $(useMasto()) 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 paginator = client.v1.timelines.listHashtag(tagName)
const stream = useStreaming(client => client.v1.stream.streamTagTimeline(tagName)) const stream = useStreaming(client => client.v1.stream.streamTagTimeline(tagName))