From f135e4d5834051e248d114c11a52c244846087a6 Mon Sep 17 00:00:00 2001
From: Gabriel Kaszewski <gabrielkaszewski@gmail.com>
Date: Sat, 16 May 2026 02:16:45 +0200
Subject: [PATCH] feat(frontend): loading.tsx skeletons for feed, tags, search,
 and thread pages

---
 thoughts-frontend/app/loading.tsx             | 20 +++++++++++++++++++
 thoughts-frontend/app/search/loading.tsx      | 12 +++++++++++
 .../app/tags/[tagName]/loading.tsx            | 12 +++++++++++
 .../app/thoughts/[thoughtId]/loading.tsx      | 13 ++++++++++++
 4 files changed, 57 insertions(+)
 create mode 100644 thoughts-frontend/app/loading.tsx
 create mode 100644 thoughts-frontend/app/search/loading.tsx
 create mode 100644 thoughts-frontend/app/tags/[tagName]/loading.tsx
 create mode 100644 thoughts-frontend/app/thoughts/[thoughtId]/loading.tsx

diff --git a/thoughts-frontend/app/loading.tsx b/thoughts-frontend/app/loading.tsx
new file mode 100644
index 0000000..55549f4
--- /dev/null
+++ b/thoughts-frontend/app/loading.tsx
@@ -0,0 +1,20 @@
+import { ThoughtSkeleton } from "@/components/loading-skeleton";
+
+export default function FeedLoading() {
+  return (
+    <div className="container mx-auto max-w-6xl p-4 sm:p-6">
+      <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
+        <aside className="hidden lg:block lg:col-span-1" />
+        <main className="col-span-1 lg:col-span-2 space-y-6">
+          <div className="h-10 w-32 bg-muted rounded animate-pulse mb-6" />
+          <div className="space-y-4">
+            <ThoughtSkeleton />
+            <ThoughtSkeleton />
+            <ThoughtSkeleton />
+          </div>
+        </main>
+        <aside className="hidden lg:block lg:col-span-1" />
+      </div>
+    </div>
+  );
+}
diff --git a/thoughts-frontend/app/search/loading.tsx b/thoughts-frontend/app/search/loading.tsx
new file mode 100644
index 0000000..7b9887b
--- /dev/null
+++ b/thoughts-frontend/app/search/loading.tsx
@@ -0,0 +1,12 @@
+import { ThoughtSkeleton } from "@/components/loading-skeleton";
+
+export default function SearchLoading() {
+  return (
+    <div className="container mx-auto max-w-2xl p-4 sm:p-6 space-y-4">
+      <div className="h-8 w-48 bg-muted rounded animate-pulse" />
+      <ThoughtSkeleton />
+      <ThoughtSkeleton />
+      <ThoughtSkeleton />
+    </div>
+  );
+}
diff --git a/thoughts-frontend/app/tags/[tagName]/loading.tsx b/thoughts-frontend/app/tags/[tagName]/loading.tsx
new file mode 100644
index 0000000..30a7a62
--- /dev/null
+++ b/thoughts-frontend/app/tags/[tagName]/loading.tsx
@@ -0,0 +1,12 @@
+import { ThoughtSkeleton } from "@/components/loading-skeleton";
+
+export default function TagLoading() {
+  return (
+    <div className="container mx-auto max-w-2xl p-4 sm:p-6 space-y-4">
+      <div className="h-8 w-40 bg-muted rounded animate-pulse" />
+      <ThoughtSkeleton />
+      <ThoughtSkeleton />
+      <ThoughtSkeleton />
+    </div>
+  );
+}
diff --git a/thoughts-frontend/app/thoughts/[thoughtId]/loading.tsx b/thoughts-frontend/app/thoughts/[thoughtId]/loading.tsx
new file mode 100644
index 0000000..4fbc58f
--- /dev/null
+++ b/thoughts-frontend/app/thoughts/[thoughtId]/loading.tsx
@@ -0,0 +1,13 @@
+import { ThoughtSkeleton } from "@/components/loading-skeleton";
+
+export default function ThoughtLoading() {
+  return (
+    <div className="container mx-auto max-w-2xl p-4 sm:p-6 space-y-4">
+      <ThoughtSkeleton />
+      <div className="pl-6 border-l-2 border-primary border-dashed space-y-4">
+        <ThoughtSkeleton />
+        <ThoughtSkeleton />
+      </div>
+    </div>
+  );
+}