From 02096196abb4e2284efe412faeaf57a050b28042 Mon Sep 17 00:00:00 2001
From: Madhura68 <janpetervisser2@gmail.com>
Date: Sat, 25 Apr 2026 20:09:48 +0200
Subject: [PATCH] feat(ST-601): add loading skeletons for dashboard, settings
 and todos

De drie zware split-pane routes hadden al loading.tsx; dashboard,
settings en todos kregen elk een passende animate-pulse skeleton.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/(app)/dashboard/loading.tsx | 12 ++++++++++++
 app/(app)/settings/loading.tsx  | 10 ++++++++++
 app/(app)/todos/loading.tsx     | 19 +++++++++++++++++++
 3 files changed, 41 insertions(+)
 create mode 100644 app/(app)/dashboard/loading.tsx
 create mode 100644 app/(app)/settings/loading.tsx
 create mode 100644 app/(app)/todos/loading.tsx

diff --git a/app/(app)/dashboard/loading.tsx b/app/(app)/dashboard/loading.tsx
new file mode 100644
index 0000000..656e323
--- /dev/null
+++ b/app/(app)/dashboard/loading.tsx
@@ -0,0 +1,12 @@
+export default function Loading() {
+  return (
+    <div className="p-6 max-w-4xl mx-auto w-full animate-pulse">
+      <div className="h-6 w-32 bg-border rounded mb-6" />
+      <div className="grid gap-3">
+        {[1, 2, 3].map(i => (
+          <div key={i} className="h-20 bg-border/50 rounded-xl" />
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/app/(app)/settings/loading.tsx b/app/(app)/settings/loading.tsx
new file mode 100644
index 0000000..07f3dd9
--- /dev/null
+++ b/app/(app)/settings/loading.tsx
@@ -0,0 +1,10 @@
+export default function Loading() {
+  return (
+    <div className="p-6 max-w-2xl mx-auto w-full space-y-4 animate-pulse">
+      <div className="h-6 w-28 bg-border rounded" />
+      {[1, 2, 3, 4].map(i => (
+        <div key={i} className="h-28 bg-border/50 rounded-xl" />
+      ))}
+    </div>
+  )
+}
diff --git a/app/(app)/todos/loading.tsx b/app/(app)/todos/loading.tsx
new file mode 100644
index 0000000..61d4ec9
--- /dev/null
+++ b/app/(app)/todos/loading.tsx
@@ -0,0 +1,19 @@
+export default function Loading() {
+  return (
+    <div className="p-6 max-w-2xl mx-auto w-full animate-pulse">
+      <div className="h-6 w-20 bg-border rounded mb-6" />
+      <div className="flex gap-3 mb-4">
+        <div className="h-8 w-32 bg-border/50 rounded-lg" />
+        <div className="flex-1" />
+        <div className="h-8 w-8 bg-border/50 rounded-lg" />
+      </div>
+      <div className="rounded-xl border border-border overflow-hidden">
+        <div className="h-10 bg-border/30" />
+        {[1, 2, 3, 4, 5].map(i => (
+          <div key={i} className="h-12 border-t border-border bg-border/20" />
+        ))}
+      </div>
+      <div className="mt-4 h-24 bg-border/30 rounded-xl" />
+    </div>
+  )
+}