From 444b05cac901ca2bd94013ceefc683095726e2d9 Mon Sep 17 00:00:00 2001
From: MHSanaei <ho3ein.sanaei@gmail.com>
Date: Sun, 10 May 2026 11:33:46 +0200
Subject: [PATCH] perf(frontend): code-split heavy components to improve LCP

Switch the inbounds-page modals, login page's theme switch, and the
Persian date picker to defineAsyncComponent. They're not needed on
first paint, so deferring them shrinks the initial bundle and lets
the LCP element render sooner.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 frontend/src/components/DateTimePicker.vue   | 12 ++----------
 frontend/src/pages/inbounds/InboundsPage.vue | 17 +++++++++--------
 frontend/src/pages/login/LoginPage.vue       |  5 +++--
 3 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/DateTimePicker.vue b/frontend/src/components/DateTimePicker.vue
index 0e528c21..4a9d1190 100644
--- a/frontend/src/components/DateTimePicker.vue
+++ b/frontend/src/components/DateTimePicker.vue
@@ -1,17 +1,9 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, defineAsyncComponent } from 'vue';
 import dayjs from 'dayjs';
-import PersianDatePicker from 'vue3-persian-datetime-picker';
 import { useDatepicker } from '@/composables/useDatepicker.js';
 
-// Drop-in replacement for <a-date-picker> that swaps to a real Jalali
-// calendar (vue3-persian-datetime-picker, backed by moment-jalaali)
-// when the panel's "Calendar Type" setting is `jalalian`.
-//
-// The v-model contract matches AD-Vue: the parent works with a dayjs
-// object (or null). For the persian picker we serialize to/from the
-// `YYYY-MM-DD HH:mm:ss` string it expects so callers don't need to
-// know which renderer is active.
+const PersianDatePicker = defineAsyncComponent(() => import('vue3-persian-datetime-picker'));
 
 const props = defineProps({
   value: { type: [Object, null], default: null },
diff --git a/frontend/src/pages/inbounds/InboundsPage.vue b/frontend/src/pages/inbounds/InboundsPage.vue
index b88fc7a5..83996aba 100644
--- a/frontend/src/pages/inbounds/InboundsPage.vue
+++ b/frontend/src/pages/inbounds/InboundsPage.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, ref } from 'vue';
+import { computed, defineAsyncComponent, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { Modal, message } from 'ant-design-vue';
 import {
@@ -18,16 +18,17 @@ import AppSidebar from '@/components/AppSidebar.vue';
 import CustomStatistic from '@/components/CustomStatistic.vue';
 import { useNodeList } from '@/composables/useNodeList.js';
 import InboundList from './InboundList.vue';
-import InboundFormModal from './InboundFormModal.vue';
-import ClientFormModal from './ClientFormModal.vue';
-import ClientBulkModal from './ClientBulkModal.vue';
-import InboundInfoModal from './InboundInfoModal.vue';
-import QrCodeModal from './QrCodeModal.vue';
-import TextModal from '@/components/TextModal.vue';
-import PromptModal from '@/components/PromptModal.vue';
 import { useInbounds } from './useInbounds.js';
 import { useWebSocket } from '@/composables/useWebSocket.js';
 
+const InboundFormModal = defineAsyncComponent(() => import('./InboundFormModal.vue'));
+const ClientFormModal = defineAsyncComponent(() => import('./ClientFormModal.vue'));
+const ClientBulkModal = defineAsyncComponent(() => import('./ClientBulkModal.vue'));
+const InboundInfoModal = defineAsyncComponent(() => import('./InboundInfoModal.vue'));
+const QrCodeModal = defineAsyncComponent(() => import('./QrCodeModal.vue'));
+const TextModal = defineAsyncComponent(() => import('@/components/TextModal.vue'));
+const PromptModal = defineAsyncComponent(() => import('@/components/PromptModal.vue'));
+
 const { t } = useI18n();
 
 const {
diff --git a/frontend/src/pages/login/LoginPage.vue b/frontend/src/pages/login/LoginPage.vue
index d24965b5..2df90be2 100644
--- a/frontend/src/pages/login/LoginPage.vue
+++ b/frontend/src/pages/login/LoginPage.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
+import { computed, defineAsyncComponent, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { UserOutlined, LockOutlined, KeyOutlined, SettingOutlined } from '@ant-design/icons-vue';
 
@@ -9,7 +9,8 @@ import {
   currentTheme,
   theme as themeState,
 } from '@/composables/useTheme.js';
-import ThemeSwitchLogin from '@/components/ThemeSwitchLogin.vue';
+
+const ThemeSwitchLogin = defineAsyncComponent(() => import('@/components/ThemeSwitchLogin.vue'));
 
 const { t } = useI18n();