From 73c35b3c11343e173e2670e12bb3326ec9376e3b Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Thu, 24 Nov 2022 12:02:18 +0800
Subject: [PATCH] perf: improve navigation speed

---
 components/status/StatusCard.vue | 12 ++++++---
 package.json                     |  1 +
 pages/@[user]/[post].vue         | 22 ++++++++++------
 pnpm-lock.yaml                   | 44 +++++++++++++++++++++++++++-----
 4 files changed, 61 insertions(+), 18 deletions(-)

diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index 6debcf14..c28ef865 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -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 />
diff --git a/package.json b/package.json
index 032d0317..8ad5c323 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/pages/@[user]/[post].vue b/pages/@[user]/[post].vue
index 06cd06e5..4ee00d44 100644
--- a/pages/@[user]/[post].vue
+++ b/pages/@[user]/[post].vue
@@ -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>
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2851da24..e22b2be6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -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