confirm modal + lint

src/components/notification/notification.js

@@ -1,3 +1,4 @@
+import { defineAsyncComponent } from 'vue'
 import { mapState } from 'vuex'
 
 import RichContent from 'src/components/rich_content/rich_content.jsx'
@@ -6,7 +7,6 @@ import {
   highlightClass,
   highlightStyle,
 } from '../../services/user_highlighter/user_highlighter.js'
-import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import Report from '../report/report.vue'
 import Status from '../status/status.vue'
 import StatusContent from '../status_content/status_content.vue'
@@ -69,7 +69,9 @@ const Notification = {
     RichContent,
     UserPopover,
     UserLink,
-    ConfirmModal,
+    ConfirmModal: defineAsyncComponent(
+      () => import('src/components/confirm_modal/confirm_modal.vue'),
+    ),
   },
   mounted() {
     document.addEventListener('selectionchange', this.onContentSelect)

src/components/notification/notification.vue

@@ -267,7 +267,7 @@
       </div>
     </div>
     <teleport to="#modal">
-      <confirm-modal
+      <ConfirmModal
         v-if="showingApproveConfirmDialog"
         :title="$t('user_card.approve_confirm_title')"
         :confirm-text="$t('user_card.approve_confirm_accept_button')"
@@ -276,8 +276,8 @@
         @cancelled="hideApproveConfirmDialog"
       >
         {{ $t('user_card.approve_confirm', { user: user.screen_name_ui }) }}
-      </confirm-modal>
-      <confirm-modal
+      </ConfirmModal>
+      <ConfirmModal
         v-if="showingDenyConfirmDialog"
         :title="$t('user_card.deny_confirm_title')"
         :confirm-text="$t('user_card.deny_confirm_accept_button')"
@@ -286,7 +286,7 @@
         @cancelled="hideDenyConfirmDialog"
       >
         {{ $t('user_card.deny_confirm', { user: user.screen_name_ui }) }}
-      </confirm-modal>
+      </ConfirmModal>
     </teleport>
   </article>
 </template>