zio
/
elk
2
0
Fork 0
Code Packages Releases 2 Activity

fix: show skeleton when loading status

zio/stable
三咲智子 2022-11-28 19:09:38 +08:00
parent eafcb5111a
commit d94bed686b
No known key found for this signature in database
GPG Key ID: 69992F2250DFD93E
1 changed files with 34 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
pages/@[account]/[status].vue
View File

@ -7,11 +7,11 @@ const id = $(computedEager(() => route.params.status as string))
const main = ref<ComponentPublicInstance | null>(null) const main = ref<ComponentPublicInstance | null>(null)
let bottomSpace = $ref(0) 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) window.history.state?.status as Status | undefined)
?? await fetchStatus(id), ?? 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) const replyDraft = $computed(() => status.value ? getReplyDraft(status.value) : null)
@ -27,8 +27,8 @@ function scrollTo() {
onMounted(scrollTo) onMounted(scrollTo)
if (pending) { if (pendingContext) {
watchOnce(pending, async () => { watchOnce(pendingContext, async () => {
await nextTick() await nextTick()
scrollTo() scrollTo()
}) })
@ -44,37 +44,41 @@ onReactivated(() => {
<template> <template>
<MainContent back> <MainContent back>
<div v-if="status" min-h-100vh> <template v-if="!pending">
<template v-if="context"> <div v-if="status" min-h-100vh>
<template v-for="comment of context?.ancestors" :key="comment.id"> <template v-if="context">
<StatusCard :status="comment" border="t base" py3 /> <template v-for="comment of context?.ancestors" :key="comment.id">
<StatusCard :status="comment" border="t base" py3 />
</template>
</template> </template>
</template>
<StatusDetails <StatusDetails
ref="main" ref="main"
:status="status" :status="status"
border="t base" border="t base"
style="scroll-margin-top: 60px" style="scroll-margin-top: 60px"
/> />
<PublishWidget <PublishWidget
v-if="currentUser" v-if="currentUser"
:draft-key="replyDraft!.key" :draft-key="replyDraft!.key"
:initial="replyDraft!.draft" :initial="replyDraft!.draft"
border="t base" border="t base"
/> />
<template v-if="context"> <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" py3 /> <StatusCard :status="comment" border="t base" py3 />
</template>
</template> </template>
</template>
<div border="t base" :style="{ height: `${bottomSpace}px` }" /> <div border="t base" :style="{ height: `${bottomSpace}px` }" />
</div> </div>
<CommonNotFound v-else> <CommonNotFound v-else>
Status not found Status not found
</CommonNotFound> </CommonNotFound>
</template>
<StatusCardSkeleton v-else border="b base" py-3 />
</MainContent> </MainContent>
</template> </template>