perf: defer recharge modal bundle

src/components/AppShell.tsx

@@ -19,10 +19,10 @@ import { ossAssets } from "../data/ossAssets";
 import { canManageCommunityCases, canReviewCommunity } from "../features/community-review/communityPermissions";
 import type { WebNavItem, WebNotification, WebUsageSummary, WebUserSession, WebViewKey } from "../types";
 import NotificationCenter from "./NotificationCenter";
-import { RechargeModal } from "./RechargeModal/RechargeModal";
 import { AnimatedPanel } from "./AnimatedPanel";
 import AdminMonitor from "./AdminMonitor";
 import CookieConsentBanner from "./CookieConsentBanner";
+import { loadRechargeModal, type RechargeModalComponent } from "./RechargeModal/loadRechargeModal";
 
 interface AppShellProps {
   activeView: WebViewKey;
@@ -93,6 +93,7 @@ function AppShell({
   const submenuHideTimerRef = useRef<number | null>(null);
   const [profileOpen, setProfileOpen] = useState(false);
   const [rechargeOpen, setRechargeOpen] = useState(false);
+  const [RechargeModal, setRechargeModal] = useState<RechargeModalComponent | null>(null);
   const [infoOpen, setInfoOpen] = useState(false);
   const infoRef = useRef<HTMLDivElement>(null);
   const [openSubmenuKey, setOpenSubmenuKey] = useState<WebViewKey | null>(null);
@@ -192,6 +193,21 @@ function AppShell({
     };
   }, []);
 
+  useEffect(() => {
+    if (!rechargeOpen || RechargeModal) return;
+
+    let cancelled = false;
+    void loadRechargeModal().then((component) => {
+      if (!cancelled) {
+        setRechargeModal(() => component);
+      }
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [RechargeModal, rechargeOpen]);
+
   const showSubmenu = (key: WebViewKey) => {
     if (submenuHideTimerRef.current) {
       window.clearTimeout(submenuHideTimerRef.current);
@@ -491,7 +507,9 @@ function AppShell({
         </main>
       </div>
       {session?.user.role === "admin" ? <AdminMonitor /> : null}
-      <RechargeModal open={rechargeOpen} onClose={() => setRechargeOpen(false)} currentBalance={displayedBalanceCents} />
+      {rechargeOpen && RechargeModal ? (
+        <RechargeModal open={rechargeOpen} onClose={() => setRechargeOpen(false)} currentBalance={displayedBalanceCents} />
+      ) : null}
       <CookieConsentBanner />
     </div>
   );