async load dialogs

routes/_components/dialog/dialogs.js

@@ -0,0 +1,3 @@
+export * from './showConfirmationDialog'
+export * from './showImageDialog'
+export * from './showVideoDialog'

routes/_components/status/Media.html

@@ -116,8 +116,7 @@
 <script>
   import { DEFAULT_MEDIA_WIDTH, DEFAULT_MEDIA_HEIGHT } from '../../_static/media'
   import { imgLoad, imgLoadError } from '../../_utils/events'
-  import { showVideoDialog } from '../dialog/showVideoDialog'
-  import { showImageDialog } from '../dialog/showImageDialog'
+  import { importDialogs } from '../../_utils/asyncModules'
   import { mouseover } from '../../_utils/events'
   import NonAutoplayGifv from '../NonAutoplayGifv.html'
 
@@ -139,17 +138,19 @@
       noNativeWidthHeight: (smallWidth, smallHeight) => typeof smallWidth !== 'number' || typeof smallHeight !== 'number'
     },
     methods: {
-      onClickPlayVideoButton() {
+      async onClickPlayVideoButton() {
         let media = this.get('media')
         let width = this.get('modalWidth')
         let height = this.get('modalHeight')
-        showVideoDialog(media.preview_url, media.url, width, height, media.description)
+        let dialogs = await importDialogs()
+        dialogs.showVideoDialog(media.preview_url, media.url, width, height, media.description)
       },
-      onClickShowImageButton() {
+      async onClickShowImageButton() {
         let media = this.get('media')
         let width = this.get('modalWidth')
         let height = this.get('modalHeight')
-        showImageDialog(media.preview_url, media.url, media.type, width, height, media.description)
+        let dialogs = await importDialogs()
+        dialogs.showImageDialog(media.preview_url, media.url, media.type, width, height, media.description)
       }
     },
     data: () => ({

routes/_utils/asyncModules.js

@@ -31,4 +31,8 @@ export const importWebSocketClient = () => import(
 
 export const importPseudoVirtualList = () => import(
   /* webpackChunkName: 'PseudoVirtualList' */ '../_components/pseudoVirtualList/PseudoVirtualList.html'
-  ).then(mod => mod.default)
+  ).then(mod => mod.default)
+
+export const importDialogs = () => import(
+  /* webpackChunkName: 'dialogs' */ '../_components/dialog/dialogs.js'
+  )

routes/settings/instances/[instanceName].html

@@ -99,7 +99,7 @@
   import SettingsLayout from '../_components/SettingsLayout.html'
   import ExternalLink from '../../_components/ExternalLink.html'
   import Avatar from '../../_components/Avatar.html'
-  import { showConfirmationDialog } from '../../_components/dialog/showConfirmationDialog'
+  import { importDialogs } from '../../_utils/asyncModules'
   import {
     changeTheme,
     switchToInstance,
@@ -139,11 +139,12 @@
         let instanceName = this.get('instanceName')
         switchToInstance(instanceName)
       },
-      onLogOut(e) {
+      async onLogOut(e) {
         e.preventDefault()
         let instanceName = this.get('instanceName')
 
-        showConfirmationDialog({
+        let dialogs = await importDialogs()
+        dialogs.showConfirmationDialog({
           text: `Log out of ${instanceName}?`,
           onPositive() {
             logOutOfInstance(instanceName)