perf: defer heavy modules and add performance baselines

Lazy-load Stripe and the chat reply animation, remove the unused Lottie runtime, and add repeatable bundle and Web Vitals baseline tooling.

src/app/subscription/components/index.ts

@@ -8,4 +8,3 @@ export * from "./subscription-cta-button";
 export * from "./subscription-payment-method";
 export * from "./subscription-payment-success-dialog";
 export * from "./subscription-vip-offer-section";
-export * from "./stripe-payment-dialog";

src/app/subscription/components/lazy-stripe-payment-dialog.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+import type { StripePaymentDialogProps } from "./stripe-payment-dialog";
+import { stripePaymentDialogStyles as styles } from "./stripe-payment-dialog.styles";
+
+const StripePaymentDialog = dynamic(
+  () =>
+    import("./stripe-payment-dialog").then(
+      (module) => module.StripePaymentDialog,
+    ),
+  {
+    ssr: false,
+    loading: StripePaymentDialogLoading,
+  },
+);
+
+export function LazyStripePaymentDialog(props: StripePaymentDialogProps) {
+  return <StripePaymentDialog {...props} />;
+}
+
+function StripePaymentDialogLoading() {
+  return (
+    <div
+      className={styles.overlay}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="stripe-payment-loading-title"
+    >
+      <div className={styles.dialog} aria-busy="true">
+        <div className={styles.header}>
+          <h2 id="stripe-payment-loading-title" className={styles.title}>
+            Preparing secure payment
+          </h2>
+          <p className={styles.content}>Loading payment methods...</p>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/subscription/components/subscription-checkout-button.tsx

@@ -11,7 +11,7 @@ import {
 } from "@/stores/payment/payment-context";
 import { Logger } from "@/utils";
 
-import { StripePaymentDialog } from "./stripe-payment-dialog";
+import { LazyStripePaymentDialog } from "./lazy-stripe-payment-dialog";
 import { stripePaymentDialogStyles as dialogStyles } from "./stripe-payment-dialog.styles";
 import { SubscriptionCtaButton } from "./subscription-cta-button";
 
@@ -95,7 +95,7 @@ export function SubscriptionCheckoutButton({
         />
       ) : null}
       {paymentLaunch.shouldShowStripeDialog && paymentLaunch.stripeClientSecret ? (
-        <StripePaymentDialog
+        <LazyStripePaymentDialog
           clientSecret={paymentLaunch.stripeClientSecret}
           onClose={paymentLaunch.handleStripeClose}
           onConfirmed={paymentLaunch.handleStripeConfirmed}