media modal dynamic

src/components/media_modal/media_modal.js

@@ -1,12 +1,7 @@
-import Flash from 'src/components/flash/flash.vue'
 import GestureService from '../../services/gesture_service/gesture_service'
-import Modal from '../modal/modal.vue'
-import PinchZoom from '../pinch_zoom/pinch_zoom.vue'
-import StillImage from '../still-image/still-image.vue'
-import SwipeClick from '../swipe_click/swipe_click.vue'
-import VideoAttachment from '../video_attachment/video_attachment.vue'
 
 import { useMediaViewerStore } from 'src/stores/media_viewer.js'
+import { defineAsyncComponent } from 'vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -20,12 +15,24 @@ library.add(faChevronLeft, faChevronRight, faCircleNotch, faTimes)
 
 const MediaModal = {
   components: {
-    StillImage,
+    StillImage: defineAsyncComponent(
-    VideoAttachment,
+      () => import( 'src/components/still-image/still-image.vue'),
-    PinchZoom,
+    ),
-    SwipeClick,
+    VideoAttachment: defineAsyncComponent(
-    Modal,
+      () => import( 'src/components/video_attachment/video_attachment.vue'),
-    Flash,
+    ),
+    PinchZoom: defineAsyncComponent(
+      () => import( 'src/components/pinch_zoom/pinch_zoom.vue'),
+    ),
+    SwipeClick: defineAsyncComponent(
+      () => import( 'src/components/swipe_click/swipe_click.vue'),
+    ),
+    Modal: defineAsyncComponent(
+      () => import( 'src/components/modal/modal.vue'),
+    ),
+    Flash: defineAsyncComponent(
+      () => import( 'src/components/flash/flash.vue'),
+    ),
   },
   data() {
     return {