From fc489c4f46dbf6f9cbb47754134f74fda977b35f Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Thu, 26 Feb 2026 12:55:03 -0500
Subject: [PATCH] perf: optimization final phase - defineAsyncComponent for
 modals

---
 frontend/src/components/AppHeader.vue | 4 ++--
 frontend/src/views/MapView.vue        | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue
index 528e909..56916cf 100644
--- a/frontend/src/components/AppHeader.vue
+++ b/frontend/src/components/AppHeader.vue
@@ -96,12 +96,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, defineAsyncComponent } from 'vue'
 import { useAuthStore } from '@/stores/auth'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { useThemeStore } from '@/stores/theme'
-import ReportModal from './ReportModal.vue'
+const ReportModal = defineAsyncComponent(() => import('./ReportModal.vue'))
 
 const { t, locale } = useI18n()
 const authStore = useAuthStore()
diff --git a/frontend/src/views/MapView.vue b/frontend/src/views/MapView.vue
index db32927..30f9e03 100644
--- a/frontend/src/views/MapView.vue
+++ b/frontend/src/views/MapView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, watch, nextTick, onUnmounted, computed } from "vue";
+import { onMounted, ref, watch, nextTick, onUnmounted, computed, defineAsyncComponent } from "vue";
 import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
 import { useRouteStore } from "@/stores/route";
@@ -11,7 +11,7 @@ import { analyticsService } from "@/services/analyticsService";
 import { getImageUrl } from "@/utils/imageUrl";
 
 import { useDirectionsRoute } from "@/composables/useDirectionsRoute";
-import BusStopInfoModal from "@/components/BusStopInfoModal.vue";
+const BusStopInfoModal = defineAsyncComponent(() => import("@/components/BusStopInfoModal.vue"));
 import type { BusStop } from '@/types'
 
 const router = useRouter();