From d94bed686b96d3c18c60964b23fe555fff43340b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Mon, 28 Nov 2022 19:09:38 +0800
Subject: [PATCH] fix: show skeleton when loading status

---
 pages/@[account]/[status].vue | 64 +++++++++++++++++++----------------
 1 file changed, 34 insertions(+), 30 deletions(-)

diff --git a/pages/@[account]/[status].vue b/pages/@[account]/[status].vue
index 344efcc6..382a94cc 100644
--- a/pages/@[account]/[status].vue
+++ b/pages/@[account]/[status].vue
@@ -7,11 +7,11 @@ const id = $(computedEager(() => route.params.status as string))
 const main = ref<ComponentPublicInstance | null>(null)
 let bottomSpace = $ref(0)
 
-const { data: status, refresh: refreshStatus } = useAsyncData(async () => (
+const { data: status, pending, refresh: refreshStatus } = useAsyncData(async () => (
   window.history.state?.status as Status | undefined)
   ?? await fetchStatus(id),
 )
-const { data: context, pending, refresh: refreshContext } = useAsyncData(`context:${id}`, () => useMasto().statuses.fetchContext(id))
+const { data: context, pending: pendingContext, refresh: refreshContext } = useAsyncData(`context:${id}`, () => useMasto().statuses.fetchContext(id))
 
 const replyDraft = $computed(() => status.value ? getReplyDraft(status.value) : null)
 
@@ -27,8 +27,8 @@ function scrollTo() {
 
 onMounted(scrollTo)
 
-if (pending) {
-  watchOnce(pending, async () => {
+if (pendingContext) {
+  watchOnce(pendingContext, async () => {
     await nextTick()
     scrollTo()
   })
@@ -44,37 +44,41 @@ onReactivated(() => {
 
 <template>
   <MainContent back>
-    <div v-if="status" min-h-100vh>
-      <template v-if="context">
-        <template v-for="comment of context?.ancestors" :key="comment.id">
-          <StatusCard :status="comment" border="t base" py3 />
+    <template v-if="!pending">
+      <div v-if="status" min-h-100vh>
+        <template v-if="context">
+          <template v-for="comment of context?.ancestors" :key="comment.id">
+            <StatusCard :status="comment" border="t base" py3 />
+          </template>
         </template>
-      </template>
 
-      <StatusDetails
-        ref="main"
-        :status="status"
-        border="t base"
-        style="scroll-margin-top: 60px"
-      />
-      <PublishWidget
-        v-if="currentUser"
-        :draft-key="replyDraft!.key"
-        :initial="replyDraft!.draft"
-        border="t base"
-      />
+        <StatusDetails
+          ref="main"
+          :status="status"
+          border="t base"
+          style="scroll-margin-top: 60px"
+        />
+        <PublishWidget
+          v-if="currentUser"
+          :draft-key="replyDraft!.key"
+          :initial="replyDraft!.draft"
+          border="t base"
+        />
 
-      <template v-if="context">
-        <template v-for="comment of context?.descendants" :key="comment.id">
-          <StatusCard :status="comment" border="t base" py3 />
+        <template v-if="context">
+          <template v-for="comment of context?.descendants" :key="comment.id">
+            <StatusCard :status="comment" border="t base" py3 />
+          </template>
         </template>
-      </template>
 
-      <div border="t base" :style="{ height: `${bottomSpace}px` }" />
-    </div>
+        <div border="t base" :style="{ height: `${bottomSpace}px` }" />
+      </div>
 
-    <CommonNotFound v-else>
-      Status not found
-    </CommonNotFound>
+      <CommonNotFound v-else>
+        Status not found
+      </CommonNotFound>
+    </template>
+
+    <StatusCardSkeleton v-else border="b base" py-3 />
   </MainContent>
 </template>