From 97eca25815f1bf39cf5ba40af5b110b68969ef9d Mon Sep 17 00:00:00 2001
From: Baskarayelu <baskarayelu@gmail.com>
Date: Mon, 29 Jun 2026 13:15:13 +0530
Subject: [PATCH] feat: Polish Marketplace skeleton placeholders (#288)

- Replace custom MarketplaceCardSkeleton with ApiCardSkeleton from ApiCard.tsx to achieve exact shape parity (same layout, stats section, and dimensions)
- Fix broken JSX in ApiCard.tsx (missing closing div around sparkline row)
- Fix missing Fragment import in Skeleton.tsx
- Expand skeleton test suite from 1 to 3 focused tests covering card structure, header, sidebar, and toolbar parity

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/ApiCard.tsx                  |  1 +
 src/components/Skeleton.tsx                 |  2 +-
 src/pages/MarketplacePage.skeleton.test.tsx | 23 +++++++++
 src/pages/MarketplacePage.skeleton.tsx      | 56 +++++++++++++--------
 4 files changed, 59 insertions(+), 23 deletions(-)

diff --git a/src/components/ApiCard.tsx b/src/components/ApiCard.tsx
index 71ad9f3..a651d78 100644
--- a/src/components/ApiCard.tsx
+++ b/src/components/ApiCard.tsx
@@ -543,6 +543,7 @@ export default function ApiCard({
   width={90}
   height={28}
 />
+      </div>
 
       <div
         className="api-marketplace-card-footer"
diff --git a/src/components/Skeleton.tsx b/src/components/Skeleton.tsx
index 2a63611..1ce4eca 100644
--- a/src/components/Skeleton.tsx
+++ b/src/components/Skeleton.tsx
@@ -1,4 +1,4 @@
-import React, { CSSProperties } from "react";
+import React, { CSSProperties, Fragment } from "react";
 
 interface SkeletonProps {
   width?: string | number;
diff --git a/src/pages/MarketplacePage.skeleton.test.tsx b/src/pages/MarketplacePage.skeleton.test.tsx
index 38392e8..ce98f9c 100644
--- a/src/pages/MarketplacePage.skeleton.test.tsx
+++ b/src/pages/MarketplacePage.skeleton.test.tsx
@@ -16,4 +16,27 @@ describe("MarketplacePageSkeleton", () => {
     expect(container.querySelector(".marketplace-grid")).toBeTruthy();
     expect(container.querySelectorAll(".api-marketplace-card").length).toBe(6);
   });
+
+  it("renders card skeletons that match the ApiCard structure for shape parity", () => {
+    const { container } = render(<MarketplacePageSkeleton />);
+
+    // Each card skeleton should contain the stats section matching the real card
+    const cards = container.querySelectorAll(".api-marketplace-card");
+    expect(cards.length).toBe(6);
+
+    // Each card should have a stats section (matching real ApiCard structure)
+    cards.forEach((card) => {
+      expect(card.querySelector(".api-card__stats")).toBeTruthy();
+      expect(card.querySelectorAll(".api-card__stat").length).toBe(3);
+    });
+  });
+
+  it("renders header, filter sidebar, and toolbar placeholders", () => {
+    const { container } = render(<MarketplacePageSkeleton />);
+
+    expect(container.querySelector(".marketplace-header")).toBeTruthy();
+    expect(container.querySelector(".marketplace-sidebar")).toBeTruthy();
+    expect(container.querySelector(".marketplace-toolbar")).toBeTruthy();
+    expect(container.querySelector(".filters-sidebar")).toBeTruthy();
+  });
 });
diff --git a/src/pages/MarketplacePage.skeleton.tsx b/src/pages/MarketplacePage.skeleton.tsx
index edf14c9..5e5d44d 100644
--- a/src/pages/MarketplacePage.skeleton.tsx
+++ b/src/pages/MarketplacePage.skeleton.tsx
@@ -1,26 +1,22 @@
+/**
+ * MarketplacePage.skeleton.tsx
+ *
+ * Loading shell for the Marketplace page.
+ * Uses ApiCardSkeleton (from ApiCard.tsx) to keep skeleton shapes in
+ * exact parity with the real cards — dimensions, layout structure, and
+ * spacing all mirror the final rendered output so the CLS shift on load
+ * is minimal.
+ */
 import Skeleton from "../components/Skeleton";
+import { ApiCardSkeleton } from "../components/ApiCard";
 
-function MarketplaceCardSkeleton() {
-  return (
-    <article
-      className="preview-card api-marketplace-card"
-      aria-hidden="true"
-      style={{ padding: 16, display: "grid", gap: 12, minHeight: 220 }}
-    >
-      <Skeleton width={56} height={56} borderRadius={10} />
-      <Skeleton width="68%" height={18} />
-      <Skeleton width="88%" height={14} />
-      <Skeleton width="74%" height={14} />
-      <div style={{ display: "flex", gap: 8, marginTop: 4 }}>
-        <Skeleton width={48} height={24} borderRadius={999} />
-        <Skeleton width={64} height={24} borderRadius={999} />
-        <Skeleton width={40} height={24} borderRadius={999} />
-      </div>
-      <Skeleton width="100%" height={36} borderRadius={14} style={{ marginTop: "auto" }} />
-    </article>
-  );
-}
-
+/**
+ * Mirrors the FiltersSidebar structure:
+ * - heading placeholder
+ * - 4 filter groups (label + input)
+ * - price range row
+ * - apply button
+ */
 function FilterBlockSkeleton() {
   return (
     <section
@@ -28,14 +24,18 @@ function FilterBlockSkeleton() {
       aria-hidden="true"
       style={{ display: "grid", gap: 16 }}
     >
+      {/* Section heading */}
       <Skeleton width="55%" height={22} />
+      {/* Filter groups */}
       {Array.from({ length: 4 }).map((_, index) => (
         <div key={index} style={{ display: "grid", gap: 8 }}>
           <Skeleton width="40%" height={14} />
           <Skeleton width="100%" height={40} borderRadius={10} />
         </div>
       ))}
+      {/* Price range label */}
       <Skeleton width="48%" height={14} />
+      {/* Apply / clear button */}
       <Skeleton width="100%" height={44} borderRadius={12} />
     </section>
   );
@@ -48,9 +48,12 @@ export default function MarketplacePageSkeleton() {
       aria-busy="true"
       aria-label="Marketplace loading shell"
     >
+      {/* ── Header row ── */}
       <div className="marketplace-header">
+        {/* Page title */}
         <Skeleton width={240} height={42} />
 
+        {/* Search + density toggle */}
         <div className="marketplace-search-row">
           <Skeleton width="100%" height={48} borderRadius={12} />
 
@@ -64,26 +67,35 @@ export default function MarketplacePageSkeleton() {
           </div>
         </div>
 
+        {/* Sort dropdown */}
         <Skeleton width={170} height={40} borderRadius={12} />
       </div>
 
+      {/* ── Main layout ── */}
       <div className="marketplace-layout">
         <aside className="marketplace-sidebar">
           <FilterBlockSkeleton />
         </aside>
 
         <main className="marketplace-results">
+          {/* Toolbar: result count + actions */}
           <div className="marketplace-toolbar">
             <Skeleton width="42%" height={18} />
             <div className="marketplace-actions" aria-hidden="true">
+              {/* Sort dropdown placeholder */}
               <Skeleton width={142} height={40} borderRadius={10} />
+              {/* Filters button placeholder */}
               <Skeleton width={110} height={40} borderRadius={10} />
             </div>
           </div>
 
+          {/*
+           * Card grid — ApiCardSkeleton is kept in sync with the real ApiCard
+           * layout automatically, so any future card changes are reflected here.
+           */}
           <div className="marketplace-grid">
             {Array.from({ length: 6 }).map((_, index) => (
-              <MarketplaceCardSkeleton key={index} />
+              <ApiCardSkeleton key={index} />
             ))}
           </div>
         </main>