dynamically load gallery

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,

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: {

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"

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,
+    PollForm: defineAsyncComponent(
-    QuoteForm,
+      () => 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,
   },

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"

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,
   },

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"