From 3aca1ce6c0ffc241cc0c23a2cd26249ed1c432ea Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 4 Jun 2026 18:27:09 +0300
Subject: [PATCH] dynamically load gallery

---
 src/components/chat_message/chat_message.js      |  6 ++++--
 src/components/draft/draft.js                    |  5 +++--
 src/components/draft/draft.vue                   |  2 +-
 .../post_status_form/post_status_form.js         | 16 ++++++++++------
 .../post_status_form/post_status_form.vue        |  2 +-
 src/components/status_content/status_content.js  |  6 ++++--
 src/components/status_content/status_content.vue |  2 +-
 7 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/components/chat_message/chat_message.js b/src/components/chat_message/chat_message.js
index 11dedfca7..c6cff649a 100644
--- a/src/components/chat_message/chat_message.js
+++ b/src/components/chat_message/chat_message.js
@@ -1,9 +1,9 @@
 import { mapState as mapPiniaState } from 'pinia'
 import { mapGetters, mapState } from 'vuex'
+import { defineAsyncComponent } from 'vue'
 
 import Attachment from 'src/components/attachment/attachment.vue'
 import ChatMessageDate from 'src/components/chat_message_date/chat_message_date.vue'
-import Gallery from 'src/components/gallery/gallery.vue'
 import LinkPreview from 'src/components/link-preview/link-preview.vue'
 import Popover from 'src/components/popover/popover.vue'
 import StatusContent from 'src/components/status_content/status_content.vue'
@@ -34,7 +34,9 @@ const ChatMessage = {
     Attachment,
     StatusContent,
     UserAvatar,
-    Gallery,
+    Gallery: defineAsyncComponent(
+      () => import( 'src/components/gallery/gallery.vue'),
+    ),
     LinkPreview,
     ChatMessageDate,
     UserPopover,
diff --git a/src/components/draft/draft.js b/src/components/draft/draft.js
index 50758c731..992a2b740 100644
--- a/src/components/draft/draft.js
+++ b/src/components/draft/draft.js
@@ -1,7 +1,6 @@
 import { cloneDeep } from 'lodash'
 import { defineAsyncComponent } from 'vue'
 
-import Gallery from 'src/components/gallery/gallery.vue'
 import StatusContent from 'src/components/status_content/status_content.vue'
 
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
@@ -24,7 +23,9 @@ const Draft = {
     ),
 
     StatusContent,
-    Gallery,
+    Gallery: defineAsyncComponent(
+      () => import( 'src/components/gallery/gallery.vue')
+    ),
   },
   props: {
     draft: {
diff --git a/src/components/draft/draft.vue b/src/components/draft/draft.vue
index c8d72f821..c91675e35 100644
--- a/src/components/draft/draft.vue
+++ b/src/components/draft/draft.vue
@@ -39,7 +39,7 @@
             class="faint"
           >{{ $t('drafts.empty') }}</p>
         </span>
-        <gallery
+        <Gallery
           v-if="draft.files?.length !== 0"
           class="attachments media-body"
           :compact="true"
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index cdd8ef773..b2ea91d60 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -1,17 +1,15 @@
 import { debounce, map, reject, uniqBy } from 'lodash'
 import { mapActions, mapState } from 'pinia'
 import { mapGetters } from 'vuex'
+import { defineAsyncComponent } from 'vue'
 
 import Attachment from 'src/components/attachment/attachment.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import DraftCloser from 'src/components/draft_closer/draft_closer.vue'
 import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
 import suggestor from 'src/components/emoji_input/suggestor.js'
-import Gallery from 'src/components/gallery/gallery.vue'
 import MediaUpload from 'src/components/media_upload/media_upload.vue'
-import PollForm from 'src/components/poll/poll_form.vue'
 import Popover from 'src/components/popover/popover.vue'
-import QuoteForm from 'src/components/quote/quote_form.vue'
 import ScopeSelector from 'src/components/scope_selector/scope_selector.vue'
 import Select from 'src/components/select/select.vue'
 import StatusContent from 'src/components/status_content/status_content.vue'
@@ -141,14 +139,20 @@ const PostStatusForm = {
   components: {
     MediaUpload,
     EmojiInput,
-    PollForm,
-    QuoteForm,
+    PollForm: defineAsyncComponent(
+      () => import( 'src/components/poll/poll_form.vue')
+    ),
+    QuoteForm: defineAsyncComponent(
+      () => import( 'src/components/quote/quote_form.vue')
+    ),
     ScopeSelector,
     Checkbox,
     Select,
     Attachment,
     StatusContent,
-    Gallery,
+    Gallery: defineAsyncComponent(
+      () => import( 'src/components/gallery/gallery.vue')
+    ),
     DraftCloser,
     Popover,
   },
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index d37d0a90f..a5e6ffb6d 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -396,7 +396,7 @@
           />
         </button>
       </div>
-      <gallery
+      <Gallery
         v-if="newStatus.files && newStatus.files.length > 0"
         class="attachments"
         :grid="true"
diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
index a72db5b96..0e0156c56 100644
--- a/src/components/status_content/status_content.js
+++ b/src/components/status_content/status_content.js
@@ -1,9 +1,9 @@
 import { mapState as mapPiniaState } from 'pinia'
 import { mapGetters, mapState } from 'vuex'
+import { defineAsyncComponent } from 'vue'
 
 import StatusBody from 'src/components/status_body/status_body.vue'
 import Attachment from '../attachment/attachment.vue'
-import Gallery from '../gallery/gallery.vue'
 import LinkPreview from '../link-preview/link-preview.vue'
 import Poll from '../poll/poll.vue'
 
@@ -132,7 +132,9 @@ const StatusContent = {
   components: {
     Attachment,
     Poll,
-    Gallery,
+    Gallery: defineAsyncComponent(
+      () => import( 'src/components/gallery/gallery.vue')
+    ),
     LinkPreview,
     StatusBody,
   },
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index 460a0714b..6dc80b8a5 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -34,7 +34,7 @@
         />
       </div>
 
-      <gallery
+      <Gallery
         v-if="status.attachments.length !== 0"
         class="attachments media-body"
         :compact="compact"