teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

fix: better loading handling on status page (#1729)

Browse source 
Co-authored-by: Michel EDIGHOFFER <edimitchel@gmail.com>
This commit is contained in:
Horváth Bálint 2023-02-17 23:11:35 +01:00 committed by GitHub
parent 76efc724eb
commit ff070ea9da
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 60 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
pages/[[server]]/@[account]/[status].vue
View file

@ -14,8 +14,6 @@ const route = useRoute()
const id = $(computedEager(() => route.params.status as string)) const id = $(computedEager(() => route.params.status as string))
const main = ref<ComponentPublicInstance | null>(null) const main = ref<ComponentPublicInstance | null>(null)
const publishWidget = ref()
const { data: status, pending, refresh: refreshStatus } = useAsyncData( const { data: status, pending, refresh: refreshStatus } = useAsyncData(
`status:${id}`, `status:${id}`,
() => fetchStatus(id), () => fetchStatus(id),
@ -28,9 +26,15 @@ const { data: context, pending: pendingContext, refresh: refreshContext } = useA
{ watch: [isHydrated], immediate: isHydrated.value, lazy: true, default: () => shallowRef() }, { watch: [isHydrated], immediate: isHydrated.value, lazy: true, default: () => shallowRef() },
) )
const replyDraft = $computed(() => status.value ? getReplyDraft(status.value) : null) if (pendingContext)
watchOnce(pendingContext, scrollTo)
if (pending)
watchOnce(pending, scrollTo)
async function scrollTo() {
await nextTick()
function scrollTo() {
const statusElement = unrefElement(main) const statusElement = unrefElement(main)
if (!statusElement) if (!statusElement)
return return
@ -38,18 +42,8 @@ function scrollTo() {
statusElement.scrollIntoView(true) statusElement.scrollIntoView(true)
} }
onMounted(scrollTo) const publishWidget = ref()
const focusEditor = () => publishWidget.value?.focusEditor?.()
if (pendingContext) {
watchOnce(pendingContext, async () => {
await nextTick()
scrollTo()
})
}
const focusEditor = () => {
publishWidget.value?.focusEditor?.()
}
provide('focus-editor', focusEditor) provide('focus-editor', focusEditor)
@ -58,6 +52,8 @@ watch(publishWidget, () => {
focusEditor() focusEditor()
}) })
const replyDraft = $computed(() => status.value ? getReplyDraft(status.value) : null)
onReactivated(() => { onReactivated(() => {
// Silently update data when reentering the page // Silently update data when reentering the page
// The user will see the previous content first, and any changes will be updated to the UI when the request is completed // The user will see the previous content first, and any changes will be updated to the UI when the request is completed
@ -68,10 +64,12 @@ onReactivated(() => {
<template> <template>
<MainContent back> <MainContent back>
<template v-if="!pending && !pendingContext"> <template v-if="!pending">
<div v-if="status" xl:mt-4 border="b base" mb="50vh"> <template v-if="status">
<template v-for="comment, i of context?.ancestors" :key="comment.id"> <div xl:mt-4 mb="50vh" border="b base">
<template v-if="!pendingContext">
<StatusCard <StatusCard
v-for="comment, i of context?.ancestors" :key="comment.id"
:status="comment" :actions="comment.visibility !== 'direct'" context="account" :status="comment" :actions="comment.visibility !== 'direct'" context="account"
:has-older="true" :newer="context?.ancestors[i - 1]" :has-older="true" :newer="context?.ancestors[i - 1]"
/> />
@ -93,7 +91,7 @@ onReactivated(() => {
@published="refreshContext()" @published="refreshContext()"
/> />
<TimelineSkeleton v-if="pendingContext" /> <template v-if="!pendingContext">
<DynamicScroller <DynamicScroller
v-slot="{ item, index, active }" v-slot="{ item, index, active }"
:items="context?.descendants || []" :items="context?.descendants || []"
@ -112,11 +110,14 @@ onReactivated(() => {
/> />
</DynamicScrollerItem> </DynamicScrollerItem>
</DynamicScroller> </DynamicScroller>
</template>
</div> </div>
</template>
<StatusNotFound v-else :account="route.params.account as string" :status="id" /> <StatusNotFound v-else :account="route.params.account as string" :status="id" />
</template> </template>
<StatusCardSkeleton v-else border="b base" /> <StatusCardSkeleton v-else border="b base" />
<TimelineSkeleton v-if="pending || pendingContext" />
</MainContent> </MainContent>
</template> </template>