Add Dashboard skeleton loading state (#225)

* [jules] enhance: Add skeleton loading state to Dashboard

- Created `DashboardSkeleton` component mimicking the dashboard layout
- Replaced simple loading text with `DashboardSkeleton` in `Dashboard.tsx`
- Improved perceived performance and reduced layout shift during data fetch
- Verified via Playwright screenshot
- Updated todo and changelog tracking files

* [jules] fix: Remove unused React import from DashboardSkeleton

- Addressed code review feedback by removing unused `import React from 'react'` in `web/components/skeletons/DashboardSkeleton.tsx`.
- Verified build passes with `npm run build`.

---------

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>

Author: google-labs-jules[bot]

.Jules/changelog.md

@@ -6,6 +6,9 @@
 
 ## [Unreleased]
 
+### Added
+- Dashboard skeleton loading state (`DashboardSkeleton`) to improve perceived performance during data fetch.
+
 ### Planned
 - See `todo.md` for queued tasks
 

.Jules/todo.md

@@ -10,12 +10,10 @@
 
 ### Web
 
-- [ ] **[ux]** Complete skeleton loading system for Dashboard
-  - Files: `web/pages/Dashboard.tsx`, `web/components/ui/Skeleton.tsx`
-  - Context: Replace "Loading stats..." text with full skeleton for cards + chart
-  - Impact: Professional loading experience, reduces perceived wait time
-  - Size: ~40 lines
-  - Added: 2026-01-01
+- [x] **[ux]** Complete skeleton loading system for Dashboard
+  - Completed: 2026-01-01
+  - Files modified: `web/pages/Dashboard.tsx`, `web/components/skeletons/DashboardSkeleton.tsx`
+  - Impact: Professional loading experience that mimics actual content layout
 
 - [ ] **[ux]** Toast notification system for user actions
   - Files: Create `web/components/ui/Toast.tsx`, integrate into actions

web/components/skeletons/DashboardSkeleton.tsx

@@ -0,0 +1,53 @@
+import { Card } from '../ui/Card';
+import { Skeleton } from '../ui/Skeleton';
+
+export const DashboardSkeleton = () => {
+  return (
+    <div className="p-6 space-y-6 max-w-7xl mx-auto">
+      {/* Summary Cards Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        {[1, 2, 3].map((i) => (
+          <Card key={i} className="flex flex-col items-center justify-center text-center h-[200px]">
+            {/* Icon placeholder */}
+            <Skeleton className="w-16 h-16 rounded-full mb-4" />
+            {/* Label placeholder */}
+            <Skeleton className="w-24 h-4 mb-2" />
+            {/* Value placeholder */}
+            <Skeleton className="w-32 h-8" />
+          </Card>
+        ))}
+      </div>
+
+      {/* Main Content Grid */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Chart Section */}
+        <Card title="Balance Overview">
+          <div className="mt-4 space-y-4">
+             {/* Chart bars placeholder */}
+             <div className="flex items-end justify-between h-[250px] px-4 space-x-4">
+                <Skeleton className="w-full h-[40%]" />
+                <Skeleton className="w-full h-[70%]" />
+                <Skeleton className="w-full h-[50%]" />
+                <Skeleton className="w-full h-[80%]" />
+             </div>
+          </div>
+        </Card>
+
+        {/* Recent Activity Section */}
+        <Card title="Recent Activity">
+          <div className="mt-4 space-y-4">
+            {[1, 2, 3].map((i) => (
+              <div key={i} className="flex items-center space-x-4">
+                <Skeleton className="w-10 h-10 rounded-full" />
+                <div className="flex-1 space-y-2">
+                  <Skeleton className="w-3/4 h-4" />
+                  <Skeleton className="w-1/2 h-3" />
+                </div>
+              </div>
+            ))}
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+};