From c95ef6e98c21dfa8f0f882ea99cb6cad14ddd1bc Mon Sep 17 00:00:00 2001
From: Lukas May <lukas.may@carealytix.com>
Date: Thu, 5 Feb 2026 09:02:02 +0100
Subject: [PATCH] docs(21-02): create summary and update state for skeleton
 loading states

---
 .planning/STATE.md                            |  2 +
 .../21-polish-integration/21-02-SUMMARY.md    | 37 +++++++++++++++++++
 2 files changed, 39 insertions(+)
 create mode 100644 .planning/phases/21-polish-integration/21-02-SUMMARY.md

diff --git a/.planning/STATE.md b/.planning/STATE.md
index a857f00..c3cc6b3 100644
--- a/.planning/STATE.md
+++ b/.planning/STATE.md
@@ -233,6 +233,8 @@ Recent decisions affecting current work:
 - 20-02: Subscription-driven invalidation (not local state) — simplest approach, reuses existing React Query cache
 - 20-02: Silent onError callbacks — pages degrade to manual refresh when backend is not running
 - 20-02: No new packages needed — splitLink and httpSubscriptionLink ship with @trpc/client v11
+- 21-02: Skeleton component in components/ (not ui/) — app-specific, not a shadcn primitive
+- 21-02: Inbox skeleton lives in inbox.tsx route (not InboxList component) since InboxList receives pre-loaded data
 - 21-03: Removed disabled nav stubs (Agents, Tasks, Settings) — stubs create false promises for v2.0
 - 21-03: TaskRow agent names link to /inbox — simplest cross-screen navigation for agent context
 - 21-03: Inbox task links go to /initiatives — no direct task-to-initiative mapping on frontend
diff --git a/.planning/phases/21-polish-integration/21-02-SUMMARY.md b/.planning/phases/21-polish-integration/21-02-SUMMARY.md
new file mode 100644
index 0000000..91fe82d
--- /dev/null
+++ b/.planning/phases/21-polish-integration/21-02-SUMMARY.md
@@ -0,0 +1,37 @@
+# Plan 21-02 Summary: Skeleton Loading States
+
+## Result: COMPLETE
+
+**Duration:** ~3 min
+**Commits:** 2
+
+## What was done
+
+1. **Created reusable Skeleton component** (`packages/web/src/components/Skeleton.tsx`)
+   - Simple animated placeholder: `animate-pulse rounded-md bg-muted`
+   - Accepts `className` prop merged via `cn()` for caller-controlled sizing
+   - Named export for consistency with other components
+
+2. **Dashboard skeleton loading** (`packages/web/src/components/InitiativeList.tsx`)
+   - Replaced "Loading initiatives..." text with 3 skeleton cards
+   - Each card matches InitiativeCard layout: title bar, status badge, progress bar, phase count
+
+3. **Inbox skeleton loading** (`packages/web/src/routes/inbox.tsx`)
+   - Replaced "Loading inbox..." text with skeleton header + 4 skeleton message rows
+   - Each row matches MessageCard layout: status circle, name, preview text, timestamp
+
+4. **Detail page skeleton loading** (`packages/web/src/routes/initiatives/$id.tsx`)
+   - Initiative loading: header skeleton (back arrow, title, badge) + two-column grid (phase accordions, sidebar panels)
+   - Phase loading: 3 skeleton accordion bars replacing "Loading phases..." text
+
+## Decisions
+
+- 21-02: Skeleton component in components/ (not ui/) — it's app-specific, not a shadcn primitive
+- 21-02: Inbox skeleton lives in inbox.tsx route (not InboxList component) since InboxList receives pre-loaded data
+
+## Verification
+
+- [x] `npx tsc --noEmit -p packages/web/tsconfig.app.json` — passes (own files clean)
+- [x] `npm run --workspace=packages/web build` — succeeds
+- [x] No "Loading..." plain text remains in loading paths
+- [x] Skeleton component exported and used consistently across all three screens