From 34cc9567496a04af2fcdbe6ff3dcd3bafa337e22 Mon Sep 17 00:00:00 2001
From: Chneemann <andre-kempf@mailbox.org>
Date: Mon, 24 Aug 2026 11:42:58 +0200
Subject: [PATCH] feat(ui): add global skeleton loading state for app layout

---
 app/(app)/loading.tsx | 47 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 app/(app)/loading.tsx

diff --git a/app/(app)/loading.tsx b/app/(app)/loading.tsx
new file mode 100644
index 0000000..2772194
--- /dev/null
+++ b/app/(app)/loading.tsx
@@ -0,0 +1,47 @@
+/**
+ * @file app/(app)/loading.tsx
+ * @description Loading skeleton fallback component rendered during async route transitions within the main application group.
+ */
+
+/**
+ * Renders a full-page animated skeleton UI matching the app layout structure to provide visual feedback during page loads.
+ *
+ * @returns {JSX.Element} The rendered loading skeleton component.
+ */
+export default function AppLoading() {
+  return (
+    <div className="space-y-8 max-w-7xl mx-auto pb-12 animate-pulse">
+      {/* Top Header / Title Skeleton */}
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div className="space-y-2">
+          <div className="h-4 w-36 bg-card rounded-md border border-border" />
+          <div className="h-8 w-64 bg-card rounded-md border border-border" />
+          <div className="h-4 w-96 bg-card rounded-md border border-border" />
+        </div>
+        <div className="h-10 w-32 bg-card rounded-lg border border-border" />
+      </div>
+
+      {/* Main Content Area Skeletons */}
+      <div className="grid grid-auto-fit-450 gap-4">
+        <div className="h-36 bg-card rounded-xl border border-border p-4 flex flex-col justify-between">
+          <div className="h-5 w-1/3 bg-background-muted rounded" />
+          <div className="h-8 w-1/2 bg-background-muted rounded" />
+          <div className="h-3 w-1/4 bg-background-muted rounded" />
+        </div>
+      </div>
+
+      {/* List / Table Skeleton */}
+      <div className="bg-card rounded-xl border border-border p-4 space-y-4">
+        <div className="h-5 w-40 bg-background-muted rounded" />
+        <div className="space-y-3 pt-2">
+          {[...Array(4)].map((_, i) => (
+            <div
+              key={i}
+              className="h-14 w-full bg-background-muted rounded-lg"
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}