perf(frontend): lazy-load modals on inbounds / clients / index pages

Modals on the three list pages were imported statically, so the JS +
CSS for every form, info, qr, log, backup, metrics, system-history,
version, and config-text modal sat in the initial bundle even though
they're only needed after a click.

Converted those imports to React.lazy() and gated each modal with a
new LazyMount helper that mounts on first open and keeps the component
mounted thereafter so AntD close animations still play.

Build now emits a dedicated chunk per modal — InboundFormModal at
66 kB (13 kB gzipped) and InboundInfoModal at 23 kB (4 kB gzipped)
are the largest, totalling roughly 150 kB of code that no longer
parses on first paint. Profiler measured the inbounds-page React
render tree drop from ~444 ms to ~254 ms on a prod build.

frontend/src/components/LazyMount.tsx

@@ -0,0 +1,20 @@
+import { Suspense, useEffect, useState, type ReactNode } from 'react';
+
+interface LazyMountProps {
+  when: boolean;
+  fallback?: ReactNode;
+  children: ReactNode;
+}
+
+// Mounts children only after `when` first becomes true and keeps them mounted
+// thereafter, so React.lazy modals get loaded on demand but their close
+// animations still play out. Pair with `lazy(() => import(...))` modal imports
+// on heavy list pages to keep the initial bundle small.
+export default function LazyMount({ when, fallback = null, children }: LazyMountProps) {
+  const [mounted, setMounted] = useState(when);
+  useEffect(() => {
+    if (when && !mounted) setMounted(true);
+  }, [when, mounted]);
+  if (!mounted) return null;
+  return <Suspense fallback={fallback}>{children}</Suspense>;
+}

frontend/src/pages/clients/ClientsPage.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { lazy, useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   Badge,
@@ -51,11 +51,12 @@ import AppSidebar from '@/components/AppSidebar';
 import CustomStatistic from '@/components/CustomStatistic';
 import { IntlUtil, SizeFormatter } from '@/utils';
 import { setMessageInstance } from '@/utils/messageBus';
-import ClientFormModal from './ClientFormModal';
+import LazyMount from '@/components/LazyMount';
-import ClientInfoModal from './ClientInfoModal';
+const ClientFormModal = lazy(() => import('./ClientFormModal'));
-import ClientQrModal from './ClientQrModal';
+const ClientInfoModal = lazy(() => import('./ClientInfoModal'));
-import ClientBulkAddModal from './ClientBulkAddModal';
+const ClientQrModal = lazy(() => import('./ClientQrModal'));
-import ClientBulkAdjustModal from './ClientBulkAdjustModal';
+const ClientBulkAddModal = lazy(() => import('./ClientBulkAddModal'));
+const ClientBulkAdjustModal = lazy(() => import('./ClientBulkAdjustModal'));
 import '@/styles/page-cards.css';
 import './ClientsPage.css';
 
@@ -853,6 +854,7 @@ export default function ClientsPage() {
           </Layout.Content>
         </Layout>
 
+        <LazyMount when={formOpen}>
           <ClientFormModal
             open={formOpen}
             mode={formMode}
@@ -864,6 +866,8 @@ export default function ClientsPage() {
             save={onSave}
             onOpenChange={setFormOpen}
           />
+        </LazyMount>
+        <LazyMount when={infoOpen}>
           <ClientInfoModal
             open={infoOpen}
             client={infoClient}
@@ -872,12 +876,16 @@ export default function ClientsPage() {
             subSettings={subSettings}
             onOpenChange={setInfoOpen}
           />
+        </LazyMount>
+        <LazyMount when={qrOpen}>
           <ClientQrModal
             open={qrOpen}
             client={qrClient}
             subSettings={subSettings}
             onOpenChange={setQrOpen}
           />
+        </LazyMount>
+        <LazyMount when={bulkAddOpen}>
           <ClientBulkAddModal
             open={bulkAddOpen}
             inbounds={inbounds}
@@ -885,6 +893,8 @@ export default function ClientsPage() {
             onOpenChange={setBulkAddOpen}
             onSaved={() => setBulkAddOpen(false)}
           />
+        </LazyMount>
+        <LazyMount when={bulkAdjustOpen}>
           <ClientBulkAdjustModal
             open={bulkAdjustOpen}
             count={selectedRowKeys.length}
@@ -898,6 +908,7 @@ export default function ClientsPage() {
               return null;
             }}
           />
+        </LazyMount>
       </Layout>
     </ConfigProvider>
   );

frontend/src/pages/inbounds/InboundsPage.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { lazy, useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   Card,
@@ -28,14 +28,15 @@ import { useWebSocket } from '@/hooks/useWebSocket';
 import { useNodes } from '@/hooks/useNodes';
 import AppSidebar from '@/components/AppSidebar';
 import CustomStatistic from '@/components/CustomStatistic';
-import TextModal from '@/components/TextModal';
+const TextModal = lazy(() => import('@/components/TextModal'));
-import PromptModal from '@/components/PromptModal';
+const PromptModal = lazy(() => import('@/components/PromptModal'));
 
 import { useInbounds } from './useInbounds';
 import InboundList from './InboundList';
-import InboundFormModal from './InboundFormModal';
+import LazyMount from '@/components/LazyMount';
-import InboundInfoModal from './InboundInfoModal';
+const InboundFormModal = lazy(() => import('./InboundFormModal'));
-import QrCodeModal from './QrCodeModal';
+const InboundInfoModal = lazy(() => import('./InboundInfoModal'));
+const QrCodeModal = lazy(() => import('./QrCodeModal'));
 import '@/styles/page-cards.css';
 import './InboundsPage.css';
 
@@ -517,6 +518,7 @@ export default function InboundsPage() {
           </Layout.Content>
         </Layout>
 
+        <LazyMount when={formOpen}>
           <InboundFormModal
             open={formOpen}
             onClose={() => setFormOpen(false)}
@@ -526,6 +528,8 @@ export default function InboundsPage() {
             dbInbounds={dbInbounds as any[]}
             availableNodes={nodesList}
           />
+        </LazyMount>
+        <LazyMount when={infoOpen}>
           <InboundInfoModal
             open={infoOpen}
             onClose={() => setInfoOpen(false)}
@@ -540,6 +544,8 @@ export default function InboundsPage() {
             lastOnlineMap={lastOnlineMap}
             nodeAddress={infoNodeAddress}
           />
+        </LazyMount>
+        <LazyMount when={qrOpen}>
           <QrCodeModal
             open={qrOpen}
             onClose={() => setQrOpen(false)}
@@ -549,7 +555,9 @@ export default function InboundsPage() {
             nodeAddress={qrNodeAddress}
             subSettings={subSettings}
           />
+        </LazyMount>
 
+        <LazyMount when={textOpen}>
           <TextModal
             open={textOpen}
             onClose={() => setTextOpen(false)}
@@ -557,6 +565,8 @@ export default function InboundsPage() {
             content={textContent}
             fileName={textFileName}
           />
+        </LazyMount>
+        <LazyMount when={promptOpen}>
           <PromptModal
             open={promptOpen}
             onClose={() => setPromptOpen(false)}
@@ -567,6 +577,7 @@ export default function InboundsPage() {
             loading={promptLoading}
             onConfirm={onPromptConfirm}
           />
+        </LazyMount>
       </Layout>
     </ConfigProvider>
   );

frontend/src/pages/index/IndexPage.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { lazy, useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   Button,
@@ -40,18 +40,19 @@ import { useStatus } from '@/hooks/useStatus';
 import { useMediaQuery } from '@/hooks/useMediaQuery';
 import AppSidebar from '@/components/AppSidebar';
 import CustomStatistic from '@/components/CustomStatistic';
-import JsonEditor from '@/components/JsonEditor';
+import LazyMount from '@/components/LazyMount';
 import { setMessageInstance } from '@/utils/messageBus';
 import StatusCard from './StatusCard';
 import XrayStatusCard from './XrayStatusCard';
-import PanelUpdateModal from './PanelUpdateModal';
 import type { PanelUpdateInfo } from './PanelUpdateModal';
-import LogModal from './LogModal';
+const JsonEditor = lazy(() => import('@/components/JsonEditor'));
-import BackupModal from './BackupModal';
+const PanelUpdateModal = lazy(() => import('./PanelUpdateModal'));
-import SystemHistoryModal from './SystemHistoryModal';
+const LogModal = lazy(() => import('./LogModal'));
-import XrayMetricsModal from './XrayMetricsModal';
+const BackupModal = lazy(() => import('./BackupModal'));
-import XrayLogModal from './XrayLogModal';
+const SystemHistoryModal = lazy(() => import('./SystemHistoryModal'));
-import VersionModal from './VersionModal';
+const XrayMetricsModal = lazy(() => import('./XrayMetricsModal'));
+const XrayLogModal = lazy(() => import('./XrayLogModal'));
+const VersionModal = lazy(() => import('./VersionModal'));
 import '@/styles/page-cards.css';
 import './IndexPage.css';
 
@@ -435,33 +436,48 @@ export default function IndexPage() {
           </Layout.Content>
         </Layout>
 
+        <LazyMount when={panelUpdateOpen}>
           <PanelUpdateModal
             open={panelUpdateOpen}
             info={panelUpdateInfo}
             onClose={() => setPanelUpdateOpen(false)}
             onBusy={setBusy}
           />
+        </LazyMount>
+        <LazyMount when={logsOpen}>
           <LogModal open={logsOpen} onClose={() => setLogsOpen(false)} />
+        </LazyMount>
+        <LazyMount when={backupOpen}>
           <BackupModal
             open={backupOpen}
             basePath={basePath}
             onClose={() => setBackupOpen(false)}
             onBusy={setBusy}
           />
+        </LazyMount>
+        <LazyMount when={sysHistoryOpen}>
           <SystemHistoryModal
             open={sysHistoryOpen}
             status={status}
             onClose={() => setSysHistoryOpen(false)}
           />
+        </LazyMount>
+        <LazyMount when={xrayMetricsOpen}>
           <XrayMetricsModal open={xrayMetricsOpen} onClose={() => setXrayMetricsOpen(false)} />
+        </LazyMount>
+        <LazyMount when={xrayLogsOpen}>
           <XrayLogModal open={xrayLogsOpen} onClose={() => setXrayLogsOpen(false)} />
+        </LazyMount>
+        <LazyMount when={versionOpen}>
           <VersionModal
             open={versionOpen}
             status={status}
             onClose={() => setVersionOpen(false)}
             onBusy={setBusy}
           />
+        </LazyMount>
 
+        <LazyMount when={configTextOpen}>
           <Modal
             open={configTextOpen}
             title={t('pages.index.config')}
@@ -496,6 +512,7 @@ export default function IndexPage() {
               readOnly
             />
           </Modal>
+        </LazyMount>
       </Layout>
     </ConfigProvider>
   );