diff --git a/src/components/draft_closer/draft_closer.js b/src/components/draft_closer/draft_closer.js
index 2648b40c5..d60243dbd 100644
--- a/src/components/draft_closer/draft_closer.js
+++ b/src/components/draft_closer/draft_closer.js
@@ -1,5 +1,4 @@
-import DialogModal from 'src/components/dialog_modal/dialog_modal.vue'
-
+import { defineAsyncComponent } from 'vue'
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
 const DraftCloser = {
@@ -9,7 +8,9 @@ const DraftCloser = {
     }
   },
   components: {
-    DialogModal,
+    DialogModal: defineAsyncComponent(
+      () => import('src/components/dialog_modal/dialog_modal.vue'),
+    ),
   },
   emits: ['save', 'discard'],
   computed: {
diff --git a/src/components/draft_closer/draft_closer.vue b/src/components/draft_closer/draft_closer.vue
index 1afb1f44d..bb8e5ec55 100644
--- a/src/components/draft_closer/draft_closer.vue
+++ b/src/components/draft_closer/draft_closer.vue
@@ -1,6 +1,6 @@
 <template>
   <teleport to="#modal">
-    <dialog-modal
+    <DialogModal
       v-if="showing"
       v-body-scroll-lock="true"
       class="confirm-modal"
@@ -36,7 +36,7 @@
           {{ $t('post_status.close_confirm_continue_composing_button') }}
         </button>
       </template>
-    </dialog-modal>
+    </DialogModal>
   </teleport>
 </template>