From c60a86579775753b81e02a745f4fbb65eabfaf8f Mon Sep 17 00:00:00 2001
From: Jean-Luc Makiola <business@jeanlucmakiola.de>
Date: Wed, 11 Mar 2026 22:36:38 +0100
Subject: [PATCH] feat(03-03): add pastel-tinted loading skeletons to
 DashboardPage

- Import palette from @/lib/palette
- Replace generic skeleton block with tinted versions using palette.*.light colors
- Grid layout mirrors dashboard structure: saving overview, bill/variable_expense row, debt/investment row
---
 frontend/src/pages/DashboardPage.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/DashboardPage.tsx b/frontend/src/pages/DashboardPage.tsx
index 1748514..3ca702b 100644
--- a/frontend/src/pages/DashboardPage.tsx
+++ b/frontend/src/pages/DashboardPage.tsx
@@ -14,6 +14,7 @@ import { EmptyState } from '@/components/EmptyState'
 import { useBudgets } from '@/hooks/useBudgets'
 import { budgetItems as budgetItemsApi } from '@/lib/api'
 import { FolderOpen } from 'lucide-react'
+import { palette } from '@/lib/palette'
 
 export function DashboardPage() {
   const { t } = useTranslation()
@@ -41,8 +42,15 @@ export function DashboardPage() {
     return (
       <div className="flex flex-col gap-4 p-6">
         <Skeleton className="h-10 w-64" />
-        <Skeleton className="h-48 w-full" />
-        <Skeleton className="h-64 w-full" />
+        <Skeleton className="h-48 w-full rounded-lg" style={{ backgroundColor: palette.saving.light }} />
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+          <Skeleton className="h-40 w-full rounded-lg" style={{ backgroundColor: palette.bill.light }} />
+          <Skeleton className="h-40 w-full rounded-lg" style={{ backgroundColor: palette.variable_expense.light }} />
+        </div>
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+          <Skeleton className="h-40 w-full rounded-lg" style={{ backgroundColor: palette.debt.light }} />
+          <Skeleton className="h-40 w-full rounded-lg" style={{ backgroundColor: palette.investment.light }} />
+        </div>
       </div>
     )
   }