confirm modal + lint

src/components/account_actions/account_actions.js

@@ -1,8 +1,8 @@
 import { mapState } from 'pinia'
+import { defineAsyncComponent } from 'vue'
 
 import UserListMenu from 'src/components/user_list_menu/user_list_menu.vue'
 import UserTimedFilterModal from 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
-import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import Popover from '../popover/popover.vue'
 import ProgressButton from '../progress_button/progress_button.vue'
 
@@ -27,7 +27,10 @@ const AccountActions = {
     ProgressButton,
     Popover,
     UserListMenu,
-    ConfirmModal,
+    ConfirmModal: defineAsyncComponent(
+      () => import('src/components/confirm_modal/confirm_modal.vue'),
+    ),
+
     UserTimedFilterModal,
   },
   methods: {

src/components/account_actions/account_actions.vue

@@ -94,7 +94,7 @@
       </template>
     </Popover>
     <teleport to="#modal">
-      <confirm-modal
+      <ConfirmModal
         v-if="showingConfirmBlock && !blockExpiration"
         ref="blockDialog"
         :title="$t('user_card.block_confirm_title')"
@@ -114,10 +114,10 @@
             />
           </template>
         </i18n-t>
-      </confirm-modal>
+      </ConfirmModal>
     </teleport>
     <teleport to="#modal">
-      <confirm-modal
+      <ConfirmModal
         v-if="showingConfirmRemoveFollower"
         :title="$t('user_card.remove_follower_confirm_title')"
         :confirm-text="$t('user_card.remove_follower_confirm_accept_button')"
@@ -136,7 +136,7 @@
             />
           </template>
         </i18n-t>
-      </confirm-modal>
+      </ConfirmModal>
       <UserTimedFilterModal
         v-if="blockExpiration"
         ref="timedBlockDialog"

src/components/attachment/attachment.js

@@ -69,12 +69,10 @@ const Attachment = {
     }
   },
   components: {
-    Flash: defineAsyncComponent(
-      () => import( 'src/components/flash/flash.vue'),
-    ),
+    Flash: defineAsyncComponent(() => import('src/components/flash/flash.vue')),
     StillImage,
     VideoAttachment: defineAsyncComponent(
-      () => import( 'src/components/video_attachment/video_attachment.vue'),
+      () => import('src/components/video_attachment/video_attachment.vue'),
     ),
     Popover,
   },

src/components/confirm_modal/mute_confirm.js

@@ -1,7 +1,7 @@
 import { mapState } from 'pinia'
+import { defineAsyncComponent } from 'vue'
 
 import Select from 'src/components/select/select.vue'
-import ConfirmModal from './confirm_modal.vue'
 
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
@@ -12,7 +12,10 @@ export default {
     showing: false,
   }),
   components: {
-    ConfirmModal,
+    ConfirmModal: defineAsyncComponent(
+      () => import('src/components/confirm_modal/confirm_modal.vue'),
+    ),
+
     Select,
   },
   computed: {

src/components/confirm_modal/mute_confirm.vue

@@ -1,5 +1,5 @@
 <template>
-  <confirm-modal
+  <ConfirmModal
     v-if="showing"
     :title="$t('user_card.mute_confirm_title')"
     :confirm-text="$t('user_card.mute_confirm_accept_button')"
@@ -18,7 +18,7 @@
         <span v-text="user.screen_name_ui" />
       </template>
     </i18n-t>
-  </confirm-modal>
+  </ConfirmModal>
 </template>
 
 <script src="./mute_confirm.js" />

src/components/desktop_nav/desktop_nav.js

@@ -1,7 +1,6 @@
 import SearchBar from 'components/search_bar/search_bar.vue'
 import { mapActions, mapState } from 'pinia'
-
-import ConfirmModal from '../confirm_modal/confirm_modal.vue'
+import { defineAsyncComponent } from 'vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInterfaceStore } from 'src/stores/interface'
@@ -39,7 +38,9 @@ library.add(
 export default {
   components: {
     SearchBar,
-    ConfirmModal,
+    ConfirmModal: defineAsyncComponent(
+      () => import('src/components/confirm_modal/confirm_modal.vue'),
+    ),
   },
   data: () => ({
     searchBarHidden: true,

src/components/desktop_nav/desktop_nav.vue

@@ -79,7 +79,7 @@
       </div>
     </div>
     <teleport to="#modal">
-      <confirm-modal
+      <ConfirmModal
         v-if="showingConfirmLogout"
         :title="$t('login.logout_confirm_title')"
         :confirm-danger="true"
@@ -89,7 +89,7 @@
         @cancelled="hideConfirmLogout"
       >
         {{ $t('login.logout_confirm') }}
-      </confirm-modal>
+      </ConfirmModal>
     </teleport>
   </nav>
 </template>

src/components/draft/draft.js

@@ -1,7 +1,6 @@
 import { cloneDeep } from 'lodash'
 import { defineAsyncComponent } from 'vue'
 
-import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
 import Gallery from 'src/components/gallery/gallery.vue'
 import StatusContent from 'src/components/status_content/status_content.vue'
 
@@ -20,7 +19,10 @@ const Draft = {
     EditStatusForm: defineAsyncComponent(
       () => import('src/components/edit_status_form/edit_status_form.vue'),
     ),
-    ConfirmModal,
+    ConfirmModal: defineAsyncComponent(
+      () => import('src/components/confirm_modal/confirm_modal.vue'),
+    ),
+
     StatusContent,
     Gallery,
   },

src/components/draft/draft.vue

@@ -77,7 +77,7 @@
       />
     </div>
     <teleport to="#modal">
-      <confirm-modal
+      <ConfirmModal
         v-if="showingConfirmDialog"
         :title="$t('drafts.abandon_confirm_title')"
         :confirm-text="$t('drafts.abandon_confirm_accept_button')"
@@ -86,7 +86,7 @@
         @cancelled="hideConfirmDialog"
       >
         {{ $t('drafts.abandon_confirm') }}
-      </confirm-modal>
+      </ConfirmModal>
     </teleport>
     <div class="actions">
       <button

src/components/drafts/drafts.js

@@ -1,4 +1,5 @@
-import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
+import { defineAsyncComponent } from 'vue'
+
 import Draft from 'src/components/draft/draft.vue'
 import List from 'src/components/list/list.vue'
 
@@ -6,7 +7,9 @@ const Drafts = {
   components: {
     Draft,
     List,
-    ConfirmModal,
+    ConfirmModal: defineAsyncComponent(
+      () => import('src/components/confirm_modal/confirm_modal.vue'),
+    ),
   },
   data() {
     return {

src/components/follow_button/follow_button.js

@@ -1,14 +1,17 @@
+import { defineAsyncComponent } from 'vue'
+
 import {
   requestFollow,
   requestUnfollow,
 } from '../../services/follow_manipulate/follow_manipulate'
-import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
 export default {
   props: ['relationship', 'user', 'labelFollowing', 'buttonClass'],
   components: {
-    ConfirmModal,
+    ConfirmModal: defineAsyncComponent(
+      () => import('src/components/confirm_modal/confirm_modal.vue'),
+    ),
   },
   data() {
     return {

src/components/follow_button/follow_button.vue

@@ -8,7 +8,7 @@
   >
     {{ label }}
     <teleport to="#modal">
-      <confirm-modal
+      <ConfirmModal
         v-if="showingConfirmUnfollow"
         :title="$t('user_card.unfollow_confirm_title')"
         :confirm-text="$t('user_card.unfollow_confirm_accept_button')"
@@ -27,7 +27,7 @@
             />
           </template>
         </i18n-t>
-      </confirm-modal>
+      </ConfirmModal>
     </teleport>
   </button>
 </template>

src/components/follow_request_card/follow_request_card.js

@@ -1,6 +1,7 @@
+import { defineAsyncComponent } from 'vue'
+
 import { notificationsFromStore } from '../../services/notification_utils/notification_utils.js'
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
-import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
@@ -8,7 +9,9 @@ const FollowRequestCard = {
   props: ['user'],
   components: {
     BasicUserCard,
-    ConfirmModal,
+    ConfirmModal: defineAsyncComponent(
+      () => import('src/components/confirm_modal/confirm_modal.vue'),
+    ),
   },
   data() {
     return {

src/components/follow_request_card/follow_request_card.vue

@@ -15,7 +15,7 @@
       </button>
     </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')"
@@ -24,8 +24,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')"
@@ -34,7 +34,7 @@
         @cancelled="hideDenyConfirmDialog"
       >
         {{ $t('user_card.deny_confirm', { user: user.screen_name_ui }) }}
-      </confirm-modal>
+      </ConfirmModal>
     </teleport>
   </basic-user-card>
 </template>

src/components/media_modal/media_modal.js

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

src/components/mobile_nav/mobile_nav.js

@@ -2,7 +2,6 @@ import { mapState } from 'pinia'
 import { defineAsyncComponent } from 'vue'
 import { mapGetters } from 'vuex'
 
-import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
 import NavigationPins from 'src/components/navigation/navigation_pins.vue'
 import SideDrawer from 'src/components/side_drawer/side_drawer.vue'
 import GestureService from '../../services/gesture_service/gesture_service'
@@ -34,7 +33,9 @@ const MobileNav = {
       () => import('src/components/notifications/notifications.vue'),
     ),
     NavigationPins,
-    ConfirmModal,
+    ConfirmModal: defineAsyncComponent(
+      () => import('src/components/confirm_modal/confirm_modal.vue'),
+    ),
   },
   data: () => ({
     notificationsCloseGesture: undefined,

src/components/mobile_nav/mobile_nav.vue

@@ -106,7 +106,7 @@
       :logout="logout"
     />
     <teleport to="#modal">
-      <confirm-modal
+      <ConfirmModal
         v-if="showingConfirmLogout"
         :title="$t('login.logout_confirm_title')"
         :confirm-danger="true"
@@ -116,7 +116,7 @@
         @cancelled="hideConfirmLogout"
       >
         {{ $t('login.logout_confirm') }}
-      </confirm-modal>
+      </ConfirmModal>
     </teleport>
   </div>
 </template>

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>

src/components/quote/quote.js

@@ -1,6 +1,7 @@
 import { defineAsyncComponent } from 'vue'
 
 import Status from '../status/status.vue'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
 

src/components/remove_follower_button/remove_follower_button.js

@@ -1,4 +1,4 @@
-import ConfirmModal from '../confirm_modal/confirm_modal.vue'
+import { defineAsyncComponent } from 'vue'
 
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
@@ -11,7 +11,9 @@ export default {
     }
   },
   components: {
-    ConfirmModal,
+    ConfirmModal: defineAsyncComponent(
+      () => import('src/components/confirm_modal/confirm_modal.vue'),
+    ),
   },
   computed: {
     label() {

src/components/remove_follower_button/remove_follower_button.vue

@@ -8,7 +8,7 @@
   >
     {{ label }}
     <teleport to="#modal">
-      <confirm-modal
+      <ConfirmModal
         v-if="showingConfirmRemoveFollower"
         :title="$t('user_card.remove_follower_confirm_title')"
         :confirm-text="$t('user_card.remove_follower_confirm_accept_button')"
@@ -27,7 +27,7 @@
             />
           </template>
         </i18n-t>
-      </confirm-modal>
+      </ConfirmModal>
     </teleport>
   </button>
 </template>

src/components/search/search.js

@@ -1,4 +1,4 @@
-import { uniqBy, map } from 'lodash'
+import { map, uniqBy } from 'lodash'
 
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 import Conversation from '../conversation/conversation.vue'

src/components/settings_modal/admin_tabs/emoji_tab.js

@@ -1,9 +1,9 @@
 import Checkbox from 'components/checkbox/checkbox.vue'
-import ConfirmModal from 'components/confirm_modal/confirm_modal.vue'
 import Popover from 'components/popover/popover.vue'
 import Select from 'components/select/select.vue'
 import StillImage from 'components/still-image/still-image.vue'
 import { assign, clone } from 'lodash'
+import { defineAsyncComponent } from 'vue'
 
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 import EmojiEditingPopover from '../helpers/emoji_editing_popover.vue'
@@ -33,7 +33,10 @@ const EmojiTab = {
     StillImage,
     Select,
     Popover,
-    ConfirmModal,
+    ConfirmModal: defineAsyncComponent(
+      () => import('src/components/confirm_modal/confirm_modal.vue'),
+    ),
+
     ModifiedIndicator,
     EmojiEditingPopover,
   },

src/components/settings_modal/helpers/emoji_editing_popover.vue

@@ -149,13 +149,21 @@
 </template>
 
 <script>
-import ConfirmModal from 'components/confirm_modal/confirm_modal.vue'
 import Popover from 'components/popover/popover.vue'
 import SelectComponent from 'components/select/select.vue'
 import StillImage from 'components/still-image/still-image.vue'
+import { defineAsyncComponent } from 'vue'
 
 export default {
-  components: { Popover, ConfirmModal, StillImage, SelectComponent },
+  components: {
+    Popover,
+    ConfirmModal: defineAsyncComponent(
+      () => import('src/components/confirm_modal/confirm_modal.vue'),
+    ),
+    StillImage,
+    SelectComponent,
+  },
+
   inject: ['emojiAddr'],
   props: {
     placement: {

src/components/settings_modal/settings_modal.js

@@ -1,9 +1,9 @@
 import { cloneDeep, isEqual } from 'lodash'
 import { mapActions, mapState } from 'pinia'
+import { defineAsyncComponent } from 'vue'
 
 import AsyncComponentError from 'src/components/async_component_error/async_component_error.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
-import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
 import Modal from 'src/components/modal/modal.vue'
 import PanelLoading from 'src/components/panel_loading/panel_loading.vue'
 import Popover from '../popover/popover.vue'
@@ -67,7 +67,10 @@ const SettingsModal = {
     Modal,
     Popover,
     Checkbox,
-    ConfirmModal,
+    ConfirmModal: defineAsyncComponent(
+      () => import('src/components/confirm_modal/confirm_modal.vue'),
+    ),
+
     SettingsModalUserContent: getResettableAsyncComponent(
       () => import('./settings_modal_user_content.vue'),
       {

src/components/staff_panel/staff_panel.js

@@ -1,4 +1,4 @@
-import { map, groupBy } from 'lodash'
+import { groupBy, map } from 'lodash'
 import { mapGetters, mapState } from 'vuex'
 
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'

src/components/status/status.js

@@ -1,23 +1,23 @@
 import { unescape as ldUnescape, uniqBy } from 'lodash'
 import { defineAsyncComponent } from 'vue'
 
+import AvatarList from 'src/components/avatar_list/avatar_list.vue'
+import EmojiReactions from 'src/components/emoji_reactions/emoji_reactions.vue'
 import MentionLink from 'src/components/mention_link/mention_link.vue'
 import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
 import StatusActionButtons from 'src/components/status_action_buttons/status_action_buttons.vue'
-import { muteFilterHits } from '../../services/status_parser/status_parser.js'
-import {
-  highlightClass,
-  highlightStyle,
-} from '../../services/user_highlighter/user_highlighter.js'
-import AvatarList from 'src/components/avatar_list/avatar_list.vue'
-import EmojiReactions from 'src/components/emoji_reactions/emoji_reactions.vue'
 import StatusContent from 'src/components/status_content/status_content.vue'
 import Timeago from 'src/components/timeago/timeago.vue'
 import UserAvatar from 'src/components/user_avatar/user_avatar.vue'
 import UserLink from 'src/components/user_link/user_link.vue'
 import UserListPopover from 'src/components/user_list_popover/user_list_popover.vue'
 import UserPopover from 'src/components/user_popover/user_popover.vue'
+import { muteFilterHits } from '../../services/status_parser/status_parser.js'
+import {
+  highlightClass,
+  highlightStyle,
+} from '../../services/user_highlighter/user_highlighter.js'
 
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
@@ -122,7 +122,7 @@ const Status = {
     AvatarList,
     Timeago,
     StatusPopover: defineAsyncComponent(
-      () => import( 'src/components/status_popover/status_popover.vue')
+      () => import('src/components/status_popover/status_popover.vue'),
     ),
     UserListPopover,
     EmojiReactions,
@@ -132,9 +132,7 @@ const Status = {
     MentionsLine,
     UserPopover,
     UserLink,
-    Quote: defineAsyncComponent(
-      () => import('src/components/quote/quote.vue')
-    ),
+    Quote: defineAsyncComponent(() => import('src/components/quote/quote.vue')),
     StatusActionButtons,
   },
   props: [

src/components/status_action_buttons/action_button.js

@@ -1,15 +1,16 @@
+import { defineAsyncComponent } from 'vue'
+
 import Popover from 'src/components/popover/popover.vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
-import { defineAsyncComponent } from 'vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faBookmark as faBookmarkRegular,
-  faStar as faStarRegular,
   faFaceSmileBeam,
+  faStar as faStarRegular,
 } from '@fortawesome/free-regular-svg-icons'
 import {
   faBookmark,
@@ -69,10 +70,13 @@ export default {
   ],
   components: {
     StatusBookmarkFolderMenu: defineAsyncComponent(
-      () => import( 'src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue'),
+      () =>
+        import(
+          'src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue'
+        ),
     ),
     EmojiPicker: defineAsyncComponent(
-      () => import( 'src/components/emoji_picker/emoji_picker.vue'),
+      () => import('src/components/emoji_picker/emoji_picker.vue'),
     ),
     Popover,
   },

src/components/status_action_buttons/status_action_buttons.js

@@ -1,6 +1,6 @@
 import { mapState } from 'pinia'
+import { defineAsyncComponent } from 'vue'
 
-import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
 import Popover from 'src/components/popover/popover.vue'
 import ActionButtonContainer from './action_button_container.vue'
 import { BUTTONS } from './buttons_definitions.js'
@@ -33,7 +33,10 @@ const StatusActionButtons = {
   },
   components: {
     Popover,
-    ConfirmModal,
+    ConfirmModal: defineAsyncComponent(
+      () => import('src/components/confirm_modal/confirm_modal.vue'),
+    ),
+
     ActionButtonContainer,
   },
   computed: {

src/components/status_action_buttons/status_action_buttons.vue

@@ -116,7 +116,7 @@
     </span>
 
     <teleport to="#modal">
-      <confirm-modal
+      <ConfirmModal
         v-if="showingConfirmDialog"
         :title="currentConfirmTitle"
         :confirm-text="currentConfirmOkText"
@@ -125,7 +125,7 @@
         @cancelled="showingConfirmDialog = false"
       >
         {{ currentConfirmBody }}
-      </confirm-modal>
+      </ConfirmModal>
     </teleport>
   </div>
 </template>

src/components/user_card/user_card.js

@@ -1,4 +1,9 @@
-import { escape as ldEscape, isEqual, merge, unescape as ldUnescape } from 'lodash'
+import {
+  isEqual,
+  escape as ldEscape,
+  unescape as ldUnescape,
+  merge,
+} from 'lodash'
 import { mapState } from 'pinia'
 
 import Checkbox from 'src/components/checkbox/checkbox.vue'

src/components/user_timed_filter_modal/user_timed_filter_modal.js

@@ -1,5 +1,6 @@
+import { defineAsyncComponent } from 'vue'
+
 import Checkbox from 'src/components/checkbox/checkbox.vue'
-import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
 import Select from 'src/components/select/select.vue'
 
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
@@ -36,7 +37,10 @@ const UserTimedFilterModal = {
     }
   },
   components: {
-    ConfirmModal,
+    ConfirmModal: defineAsyncComponent(
+      () => import('src/components/confirm_modal/confirm_modal.vue'),
+    ),
+
     Select,
     Checkbox,
   },

src/components/user_timed_filter_modal/user_timed_filter_modal.vue

@@ -1,5 +1,5 @@
 <template>
-  <confirm-modal
+  <ConfirmModal
     v-if="showing"
     class="UserTimedFilterModal"
     :title="$t(isMute ? $t('user_card.mute') : $t('user_card.block'))"
@@ -80,7 +80,7 @@
         </Checkbox>
       </div>
     </template>
-  </confirm-modal>
+  </ConfirmModal>
 </template>
 
 <script src="./user_timed_filter_modal.js"></script>