Nikurasu/elk
1
0
Fork 0
forked from Mirrors/elk
Code Pull requests Releases 2 Packages 1 Activity

perf: lazy load publish widget chunk

Browse source
This commit is contained in:
Daniel Roe 2022-12-22 14:59:51 +00:00
parent c30587ec7d
commit 17127bfefc
No known key found for this signature in database
GPG key ID: 22D5008E4F5D9B55
4 changed files with 14 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
components/modal/ModalContainer.vue
View file

@ -29,29 +29,29 @@ useEventListener('keydown', (e: KeyboardEvent) => {
</script> </script>
<template> <template>
<template v-if="isMastoInitialised"> <ModalDialog v-model="isPreviewHelpOpen" max-w-125>
<LazyHelpPreview @close="closePreviewHelp()" />
</ModalDialog>
<ClientOnly v-if="isMastoInitialised">
<ModalDialog v-model="isSigninDialogOpen" py-4 px-8 max-w-125> <ModalDialog v-model="isSigninDialogOpen" py-4 px-8 max-w-125>
<UserSignIn /> <LazyUserSignIn />
</ModalDialog>
<ModalDialog v-model="isPreviewHelpOpen" max-w-125>
<HelpPreview @close="closePreviewHelp()" />
</ModalDialog> </ModalDialog>
<ModalDialog v-model="isPublishDialogOpen" max-w-180 flex> <ModalDialog v-model="isPublishDialogOpen" max-w-180 flex>
<!-- This `w-0` style is used to avoid overflow problems in flex layouts，so don't remove it unless you know what you're doing --> <!-- This `w-0` style is used to avoid overflow problems in flex layouts，so don't remove it unless you know what you're doing -->
<PublishWidget :draft-key="dialogDraftKey" expanded flex-1 w-0 /> <LazyPublishWidget v-if="currentUser" :draft-key="dialogDraftKey" expanded flex-1 w-0 />
</ModalDialog> </ModalDialog>
<ModalDialog <ModalDialog
v-model="isMediaPreviewOpen" v-model="isMediaPreviewOpen"
w-full max-w-full h-full max-h-full w-full max-w-full h-full max-h-full
bg-transparent border-0 shadow-none bg-transparent border-0 shadow-none
> >
<ModalMediaPreview v-if="isMediaPreviewOpen" @close="closeMediaPreview()" /> <LazyModalMediaPreview v-if="isMediaPreviewOpen" @close="closeMediaPreview()" />
</ModalDialog> </ModalDialog>
<ModalDialog v-model="isEditHistoryDialogOpen" max-w-125> <ModalDialog v-model="isEditHistoryDialogOpen" max-w-125>
<StatusEditPreview :edit="statusEdit" /> <LazyStatusEditPreview :edit="statusEdit" />
</ModalDialog> </ModalDialog>
<ModalDialog v-model="isCommandPanelOpen" max-w-fit flex> <ModalDialog v-model="isCommandPanelOpen" max-w-fit flex>
<CommandPanel @close="closeCommandPanel()" /> <LazyCommandPanel @close="closeCommandPanel()" />
</ModalDialog> </ModalDialog>
</template> </ClientOnly>
</template> </template>

2
components/publish/PublishWidget.vue
View file

@ -167,7 +167,7 @@ defineExpose({
</script> </script>
<template> <template>
<div v-if="isMastoInitialised && currentUser" flex="~ col gap-4" py4 px2 sm:px4> <div flex="~ col gap-4" py4 px2 sm:px4>
<template v-if="draft.editingStatus"> <template v-if="draft.editingStatus">
<div flex="~ col gap-1"> <div flex="~ col gap-1">
<div id="state-editing" text-secondary self-center> <div id="state-editing" text-secondary self-center>

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

@ -71,8 +71,8 @@ onReactivated(() => {
border="t base" border="t base"
style="scroll-margin-top: 60px" style="scroll-margin-top: 60px"
/> />
<PublishWidget <LazyPublishWidget
v-if="currentUser" v-if="isMastoInitialised && currentUser"
ref="publishWidget" ref="publishWidget"
:draft-key="replyDraft!.key" :draft-key="replyDraft!.key"
:initial="replyDraft!.draft" :initial="replyDraft!.draft"

2
pages/home.vue
View file

@ -30,7 +30,7 @@ useHeadFixed({
</NuxtLink> </NuxtLink>
</template> </template>
<slot> <slot>
<PublishWidget draft-key="home" border="b base" /> <LazyPublishWidget v-if="isMastoInitialised && currentUser" draft-key="home" border="b base" />
<TimelinePaginator v-bind="{ paginator, stream }" context="home" /> <TimelinePaginator v-bind="{ paginator, stream }" context="home" />
</slot> </slot>
</MainContent> </MainContent>