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)
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>