mirror of
https://github.com/elk-zone/elk.git
synced 2024-11-07 01:19:57 +00:00
perf: improve navigation speed
This commit is contained in:
Anthony Fu
parent
0a8841f4f4
commit
73c35b3c11
4 changed files with 61 additions and 18 deletions
|
|
@ -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 />
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue