perf: improve navigation speed

zio/stable
Anthony Fu 2022-11-24 12:02:18 +08:00
parent 0a8841f4f4
commit 73c35b3c11
4 changed files with 61 additions and 18 deletions

View File

@ -22,11 +22,17 @@ const rebloggedBy = $computed(() => props.status.reblog ? props.status.account :
const el = ref<HTMLElement>()
const router = useRouter()
function go(e: MouseEvent) {
function onclick(e: MouseEvent) {
const path = e.composedPath() as HTMLElement[]
const el = path.find(el => ['A', 'BUTTON', 'IMG', 'VIDEO'].includes(el.tagName?.toUpperCase()))
if (!el)
router.push(getStatusPath(status))
go()
}
function go() {
// cache data
useNuxtApp().payload.data[`status-${status.id}`] = status
router.push(getStatusPath(status))
}
const timeago = useTimeAgo(() => status.createdAt, {
@ -63,7 +69,7 @@ const timeago = useTimeAgo(() => status.createdAt, {
</script>
<template>
<div ref="el" flex flex-col gap-2 px-4 hover:bg-active transition-100 cursor-pointer @click="go">
<div ref="el" flex flex-col gap-2 px-4 hover:bg-active transition-100 cursor-pointer @click="onclick">
<div v-if="rebloggedBy" pl8>
<div flex gap-1 items-center text-gray:75 text-sm>
<div i-ri:repeat-fill mr-1 />

View File

@ -31,6 +31,7 @@
"form-data": "^4.0.0",
"fs-extra": "^10.1.0",
"js-yaml": "^4.1.0",
"lru-cache": "^7.14.1",
"masto": "^4.6.6",
"nuxt": "^3.0.0",
"parse5": "^7.1.1",

View File

@ -1,19 +1,23 @@
<script setup lang="ts">
import AccountAvatar from '~~/components/account/AccountAvatar.vue'
import type { Component } from 'vue'
const params = useRoute().params
const id = computed(() => params.post as string)
const main = ref<Component | null>(null)
const { data: status } = await useAsyncData(`${id}-status`, () => masto.statuses.fetch(params.post as string))
const { data: context } = await useAsyncData(`${id}-context`, () => masto.statuses.fetchContext(params.post as string))
const { data: status } = await useAsyncData(`status-${id}`, () => masto.statuses.fetch(params.post as string))
const { data: context } = useAsyncData(`context-${id}`, () => masto.statuses.fetchContext(params.post as string))
</script>
<template>
<template v-if="status">
<template v-for="comment of context?.ancestors" :key="comment.id">
<StatusCard :status="comment" border="t base" pt-4 />
<template v-if="context">
<template v-for="comment of context?.ancestors" :key="comment.id">
<StatusCard :status="comment" border="t base" pt-4 />
</template>
</template>
<StatusDetails :status="status" border="t base" pt-4 />
<StatusDetails ref="main" :status="status" border="t base" pt-4 />
<div v-if="currentUser" border="t base" p6 flex gap-4>
<AccountAvatar :account="currentUser.account" w-10 h-10 />
<PublishWidget
@ -24,8 +28,10 @@ const { data: context } = await useAsyncData(`${id}-context`, () => masto.status
/>
</div>
<template v-for="comment of context?.descendants" :key="comment.id">
<StatusCard :status="comment" border="t base" pt-4 />
<template v-if="context">
<template v-for="comment of context?.descendants" :key="comment.id">
<StatusCard :status="comment" border="t base" pt-4 />
</template>
</template>
</template>

View File

@ -1,8 +1,5 @@
lockfileVersion: 5.4
overrides:
debug: 4.3.4
specifiers:
'@antfu/eslint-config': ^0.30.1
'@iconify-json/carbon': ^1.1.10
@ -23,6 +20,7 @@ specifiers:
form-data: ^4.0.0
fs-extra: ^10.1.0
js-yaml: ^4.1.0
lru-cache: ^7.14.1
masto: ^4.6.6
nuxt: ^3.0.0
parse5: ^7.1.1
@ -55,6 +53,7 @@ devDependencies:
form-data: 4.0.0
fs-extra: 10.1.0
js-yaml: 4.1.0
lru-cache: 7.14.1
masto: 4.6.6
nuxt: 3.0.0_e3uo4sehh4zr4i6m57mkkxxv7y
parse5: 7.1.1
@ -2898,6 +2897,28 @@ packages:
engines: {node: '>= 12'}
dev: true
/debug/2.6.9:
resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
peerDependencies:
supports-color: '*'
peerDependenciesMeta:
supports-color:
optional: true
dependencies:
ms: 2.0.0
dev: true
/debug/3.2.7:
resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
peerDependencies:
supports-color: '*'
peerDependenciesMeta:
supports-color:
optional: true
dependencies:
ms: 2.1.3
dev: true
/debug/4.3.4:
resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
engines: {node: '>=6.0'}
@ -3425,7 +3446,7 @@ packages:
/eslint-import-resolver-node/0.3.6:
resolution: {integrity: sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==}
dependencies:
debug: 4.3.4
debug: 3.2.7
resolve: 1.22.1
transitivePeerDependencies:
- supports-color
@ -3453,7 +3474,7 @@ packages:
optional: true
dependencies:
'@typescript-eslint/parser': 5.42.1_e3uo4sehh4zr4i6m57mkkxxv7y
debug: 4.3.4
debug: 3.2.7
eslint: 8.27.0
eslint-import-resolver-node: 0.3.6
transitivePeerDependencies:
@ -3511,7 +3532,7 @@ packages:
'@typescript-eslint/parser': 5.42.1_e3uo4sehh4zr4i6m57mkkxxv7y
array-includes: 3.1.5
array.prototype.flat: 1.3.0
debug: 4.3.4
debug: 2.6.9
doctrine: 2.1.0
eslint: 8.27.0
eslint-import-resolver-node: 0.3.6
@ -4922,6 +4943,11 @@ packages:
yallist: 4.0.0
dev: true
/lru-cache/7.14.1:
resolution: {integrity: sha512-ysxwsnTKdAx96aTRdhDOCQfDgbHnt8SK0KY8SEjO0wHinhWOFTESbjVCMPbU1uGXg/ch4lifqx0wfjOawU2+WA==}
engines: {node: '>=12'}
dev: true
/magic-string/0.25.9:
resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
dependencies:
@ -5153,6 +5179,10 @@ packages:
engines: {node: '>=10'}
dev: true
/ms/2.0.0:
resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
dev: true
/ms/2.1.2:
resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
dev: true
@ -6486,7 +6516,7 @@ packages:
resolution: {integrity: sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==}
engines: {node: '>= 0.8.0'}
dependencies:
debug: 4.3.4
debug: 2.6.9
depd: 2.0.0
destroy: 1.2.0
encodeurl: 1.0.2