perf: improve navigation speed

This commit is contained in:
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,10 +22,16 @@ const rebloggedBy = $computed(() => props.status.reblog ? props.status.account :
const el = ref<HTMLElement>() const el = ref<HTMLElement>()
const router = useRouter() const router = useRouter()
function go(e: MouseEvent) { function onclick(e: MouseEvent) {
const path = e.composedPath() as HTMLElement[] const path = e.composedPath() as HTMLElement[]
const el = path.find(el => ['A', 'BUTTON', 'IMG', 'VIDEO'].includes(el.tagName?.toUpperCase())) const el = path.find(el => ['A', 'BUTTON', 'IMG', 'VIDEO'].includes(el.tagName?.toUpperCase()))
if (!el) if (!el)
go()
}
function go() {
// cache data
useNuxtApp().payload.data[`status-${status.id}`] = status
router.push(getStatusPath(status)) router.push(getStatusPath(status))
} }
@ -63,7 +69,7 @@ const timeago = useTimeAgo(() => status.createdAt, {
</script> </script>
<template> <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 v-if="rebloggedBy" pl8>
<div flex gap-1 items-center text-gray:75 text-sm> <div flex gap-1 items-center text-gray:75 text-sm>
<div i-ri:repeat-fill mr-1 /> <div i-ri:repeat-fill mr-1 />

View file

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

View file

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

View file

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