From 17127bfefc34e1acf5f24ba3ac1ccff4bb48ddea Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Thu, 22 Dec 2022 14:59:51 +0000
Subject: [PATCH] perf: lazy load publish widget chunk

---
 components/modal/ModalContainer.vue      | 20 ++++++++++----------
 components/publish/PublishWidget.vue     |  2 +-
 pages/[[server]]/@[account]/[status].vue |  4 ++--
 pages/home.vue                           |  2 +-
 4 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/components/modal/ModalContainer.vue b/components/modal/ModalContainer.vue
index f8e72c28..66b8b3c0 100644
--- a/components/modal/ModalContainer.vue
+++ b/components/modal/ModalContainer.vue
@@ -29,29 +29,29 @@ useEventListener('keydown', (e: KeyboardEvent) => {
 </script>
 
 <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>
-      <UserSignIn />
-    </ModalDialog>
-    <ModalDialog v-model="isPreviewHelpOpen" max-w-125>
-      <HelpPreview @close="closePreviewHelp()" />
+      <LazyUserSignIn />
     </ModalDialog>
     <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 -->
-      <PublishWidget :draft-key="dialogDraftKey" expanded flex-1 w-0 />
+      <LazyPublishWidget v-if="currentUser" :draft-key="dialogDraftKey" expanded flex-1 w-0 />
     </ModalDialog>
     <ModalDialog
       v-model="isMediaPreviewOpen"
       w-full max-w-full h-full max-h-full
       bg-transparent border-0 shadow-none
     >
-      <ModalMediaPreview v-if="isMediaPreviewOpen" @close="closeMediaPreview()" />
+      <LazyModalMediaPreview v-if="isMediaPreviewOpen" @close="closeMediaPreview()" />
     </ModalDialog>
     <ModalDialog v-model="isEditHistoryDialogOpen" max-w-125>
-      <StatusEditPreview :edit="statusEdit" />
+      <LazyStatusEditPreview :edit="statusEdit" />
     </ModalDialog>
     <ModalDialog v-model="isCommandPanelOpen" max-w-fit flex>
-      <CommandPanel @close="closeCommandPanel()" />
+      <LazyCommandPanel @close="closeCommandPanel()" />
     </ModalDialog>
-  </template>
+  </ClientOnly>
 </template>
diff --git a/components/publish/PublishWidget.vue b/components/publish/PublishWidget.vue
index 49993cda..23e83b08 100644
--- a/components/publish/PublishWidget.vue
+++ b/components/publish/PublishWidget.vue
@@ -167,7 +167,7 @@ defineExpose({
 </script>
 
 <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">
       <div flex="~ col gap-1">
         <div id="state-editing" text-secondary self-center>
diff --git a/pages/[[server]]/@[account]/[status].vue b/pages/[[server]]/@[account]/[status].vue
index 0e4d981f..19963ce9 100644
--- a/pages/[[server]]/@[account]/[status].vue
+++ b/pages/[[server]]/@[account]/[status].vue
@@ -71,8 +71,8 @@ onReactivated(() => {
           border="t base"
           style="scroll-margin-top: 60px"
         />
-        <PublishWidget
-          v-if="currentUser"
+        <LazyPublishWidget
+          v-if="isMastoInitialised && currentUser"
           ref="publishWidget"
           :draft-key="replyDraft!.key"
           :initial="replyDraft!.draft"
diff --git a/pages/home.vue b/pages/home.vue
index 995f5cb6..33d9ec07 100644
--- a/pages/home.vue
+++ b/pages/home.vue
@@ -30,7 +30,7 @@ useHeadFixed({
       </NuxtLink>
     </template>
     <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" />
     </slot>
   </MainContent>