feat(FN-293): Add billing toggle and FeatureMatrix heading skeletons to subscription loading state

Commits merged:
- feat(FN-293): Add billing toggle and FeatureMatrix heading skeletons to subscription loading state

Files changed:
.../subscription/__tests__/index.test.tsx          | 21 ++++++++++++++++++-
 .../src/routes/dashboard/subscription/index.tsx    | 24 ++++++++++++++++------
 2 files changed, 38 insertions(+), 7 deletions(-)

Fusion-Task-Id: FN-293

apps/web/src/routes/dashboard/subscription/__tests__/index.test.tsx

@@ -403,7 +403,8 @@ describe("rendering", () => {
     it("renders skeleton placeholders while loading", () => {
       renderPage({ isLoading: true });
       const skeletons = document.querySelectorAll(".animate-pulse");
-      expect(skeletons.length).toBeGreaterThan(0);
+      // 2 toggle + 1 heading + 4 grid cards + 1 FeatureMatrix heading = 8
+      expect(skeletons.length).toBe(8);
     });
 
     it("does not render plan cards while loading", () => {
@@ -421,6 +422,24 @@ describe("rendering", () => {
       const skeletonCards = grid?.querySelectorAll(".animate-pulse");
       expect(skeletonCards?.length).toBe(4);
     });
+
+    it("FN-293: renders billing toggle and FeatureMatrix heading skeletons", () => {
+      renderPage({ isLoading: true });
+      const skeletons = document.querySelectorAll(".animate-pulse");
+      // 2 toggle + 1 heading + 4 grid cards + 1 FeatureMatrix heading = 8
+      expect(skeletons.length).toBe(8);
+
+      // Verify billing toggle area has 2 skeleton buttons
+      const toggleContainer = document.querySelector(".flex.items-center.justify-center.gap-4");
+      expect(toggleContainer).toBeInTheDocument();
+      const toggleSkeletons = toggleContainer?.querySelectorAll(".animate-pulse");
+      expect(toggleSkeletons?.length).toBe(2);
+
+      // Verify the plan grid is sm:grid-cols-2 lg:grid-cols-4
+      const grid = document.querySelector(".sm\\:grid-cols-2.lg\\:grid-cols-4");
+      expect(grid).toBeInTheDocument();
+      expect(grid?.querySelectorAll(".animate-pulse")).toHaveLength(4);
+    });
   });
 });
 

apps/web/src/routes/dashboard/subscription/index.tsx

@@ -511,13 +511,25 @@ export function SubscriptionPage() {
   if (isLoading) {
     return (
       <div className="mx-auto max-w-5xl space-y-4">
-        <Skeleton className="h-8 w-48" />
-        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-          <Skeleton className="h-48 w-full" />
-          <Skeleton className="h-48 w-full" />
-          <Skeleton className="h-48 w-full" />
-          <Skeleton className="h-48 w-full" />
+        {/* Billing toggle placeholder */}
+        <div className="flex items-center justify-center gap-4">
+          <Skeleton className="h-9 w-20" />
+          <Skeleton className="h-9 w-20" />
         </div>
+
+        {/* Plan grid placeholder */}
+        <div>
+          <Skeleton className="mb-4 h-7 w-44" />
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            <Skeleton className="h-48 w-full" />
+            <Skeleton className="h-48 w-full" />
+            <Skeleton className="h-48 w-full" />
+            <Skeleton className="h-48 w-full" />
+          </div>
+        </div>
+
+        {/* FeatureMatrix heading placeholder */}
+        <Skeleton className="h-6 w-40" />
       </div>
     );
   }