From 4c9fec684deec1b0e6a0260b3d1027b4270a8503 Mon Sep 17 00:00:00 2001
From: "sola.awojobi00-bit" <sola.awojobi00@gmail.com>
Date: Wed, 26 Aug 2026 01:23:22 +0100
Subject: [PATCH] Add StrategyCardSkeleton component

Dashboard and portfolio pages already have skeleton coverage (#911).
The strategy comparison page has no real async data source to gate a
loading state on (VAULT_STRATEGIES is a local catalog, and any faked
loading delay either breaks its 20 existing synchronous tests or
violates the react-hooks/set-state-in-effect rule), so this adds the
skeleton building block only, ready to wire in once a real fetch
exists.
---
 frontend/src/components/Skeleton.test.tsx |  2 ++
 frontend/src/components/Skeleton.tsx      | 34 +++++++++++++++++++++++
 2 files changed, 36 insertions(+)

diff --git a/frontend/src/components/Skeleton.test.tsx b/frontend/src/components/Skeleton.test.tsx
index 0745bdec..7b5e0e4c 100644
--- a/frontend/src/components/Skeleton.test.tsx
+++ b/frontend/src/components/Skeleton.test.tsx
@@ -12,6 +12,7 @@ import Skeleton, {
   TransactionRowSkeleton,
   PortfolioCardSkeleton,
   AnalyticsWidgetSkeleton,
+  StrategyCardSkeleton,
 } from "./Skeleton";
 
 describe("Skeleton", () => {
@@ -53,6 +54,7 @@ describe("Skeleton", () => {
       <TransactionRowSkeleton key="tx" />,
       <PortfolioCardSkeleton key="port" />,
       <AnalyticsWidgetSkeleton key="analytics" />,
+      <StrategyCardSkeleton key="strategy" />,
     ];
     for (const variant of variants) {
       const { container, unmount } = render(variant);
diff --git a/frontend/src/components/Skeleton.tsx b/frontend/src/components/Skeleton.tsx
index ae5cf1c0..7a68fb0a 100644
--- a/frontend/src/components/Skeleton.tsx
+++ b/frontend/src/components/Skeleton.tsx
@@ -233,6 +233,40 @@ export const PortfolioCardSkeleton: React.FC = () => (
   </div>
 );
 
+export const StrategyCardSkeleton: React.FC = () => (
+  <div
+    className="glass-panel"
+    style={{
+      textAlign: "left",
+      padding: "18px",
+      borderRadius: "16px",
+      border: "1px solid var(--border-glass)",
+      background: "rgba(255, 255, 255, 0.03)",
+      display: "flex",
+      flexDirection: "column",
+      gap: "12px",
+      minHeight: "220px",
+    }}
+    aria-hidden="true"
+  >
+    <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: "12px" }}>
+      <div style={{ flex: 1 }}>
+        <SkeletonText width="80px" lineHeight="0.75rem" style={{ marginBottom: "6px" }} />
+        <SkeletonText width="70%" lineHeight="1.05rem" />
+      </div>
+      <SkeletonCircle width={28} height={28} />
+    </div>
+    <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+      <SkeletonText width="60%" lineHeight="0.85rem" />
+      <SkeletonText width="55%" lineHeight="0.85rem" />
+      <SkeletonText width="65%" lineHeight="0.85rem" />
+    </div>
+    <div style={{ marginTop: "auto" }}>
+      <SkeletonText lines={2} lineHeight="0.85rem" />
+    </div>
+  </div>
+);
+
 export const AnalyticsWidgetSkeleton: React.FC = () => (
   <div className="glass-panel" style={{ padding: "20px" }} aria-hidden="true">
     <div style={{ display: "flex", alignItems: "center", gap: "8px", marginBottom: "16px" }}>