mirror/elk
1
0
Fork 0
mirror of https://github.com/elk-zone/elk synced 2024-11-24 07:06:08 +09:00
Code

fix: show skeleton when loading status

Browse Source
This commit is contained in:
三咲智子 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

12
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,6 +44,7 @@ onReactivated(() => {
<template> <template>
<MainContent back> <MainContent back>
<template v-if="!pending">
<div v-if="status" min-h-100vh> <div v-if="status" min-h-100vh>
<template v-if="context"> <template v-if="context">
<template v-for="comment of context?.ancestors" :key="comment.id"> <template v-for="comment of context?.ancestors" :key="comment.id">
@ -76,5 +77,8 @@ onReactivated(() => {
<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>