From 2cf6866c10e7e7219ffcf205b33744972dbed866 Mon Sep 17 00:00:00 2001
From: JoeMakuta <makutajosue@gmail.com>
Date: Thu, 26 Mar 2026 11:59:04 +0200
Subject: [PATCH 1/3] Add loader on new chat route

---
 .../new-chat/[[...chat_id]]/page.tsx          | 38 ++--------------
 .../[search_space_id]/new-chat/loading.tsx    | 45 +++++++++++++++++++
 2 files changed, 48 insertions(+), 35 deletions(-)
 create mode 100644 surfsense_web/app/dashboard/[search_space_id]/new-chat/loading.tsx

diff --git a/surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx
index 8578d2dcb..1cbfca2df 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx
@@ -74,6 +74,7 @@ import {
 	trackChatMessageSent,
 	trackChatResponseReceived,
 } from "@/lib/posthog/events";
+import Loading from "../loading";
 
 /**
  * After a tool produces output, mark any previously-decided interrupt tool
@@ -1527,40 +1528,7 @@ export default function NewChatPage() {
 	// Show loading state only when loading an existing thread
 	if (isInitializing) {
 		return (
-			<div className="flex h-[calc(100dvh-64px)] flex-col bg-main-panel px-4">
-				<div className="mx-auto w-full max-w-[44rem] flex flex-1 flex-col gap-6 py-8">
-					{/* User message */}
-					<div className="flex justify-end">
-						<Skeleton className="h-12 w-56 rounded-2xl" />
-					</div>
-
-					{/* Assistant message */}
-					<div className="flex flex-col gap-2">
-						<Skeleton className="h-4 w-full" />
-						<Skeleton className="h-4 w-[85%]" />
-						<Skeleton className="h-4 w-[70%]" />
-					</div>
-
-					{/* User message */}
-					<div className="flex justify-end">
-						<Skeleton className="h-12 w-40 rounded-2xl" />
-					</div>
-
-					{/* Assistant message */}
-					<div className="flex flex-col gap-2">
-						<Skeleton className="h-4 w-full" />
-						<Skeleton className="h-4 w-[90%]" />
-						<Skeleton className="h-4 w-[60%]" />
-					</div>
-				</div>
-
-				{/* Input bar */}
-				<div className="sticky bottom-0 pb-6 bg-main-panel">
-					<div className="mx-auto w-full max-w-[44rem]">
-						<Skeleton className="h-24 w-full rounded-2xl" />
-					</div>
-				</div>
-			</div>
+			<Loading />
 		);
 	}
 
@@ -1597,4 +1565,4 @@ export default function NewChatPage() {
 			</div>
 		</AssistantRuntimeProvider>
 	);
-}
+}
\ No newline at end of file
diff --git a/surfsense_web/app/dashboard/[search_space_id]/new-chat/loading.tsx b/surfsense_web/app/dashboard/[search_space_id]/new-chat/loading.tsx
new file mode 100644
index 000000000..1f47fb95a
--- /dev/null
+++ b/surfsense_web/app/dashboard/[search_space_id]/new-chat/loading.tsx
@@ -0,0 +1,45 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function Loading() {
+  return (
+    <div className="flex h-[calc(100dvh-64px)] flex-col bg-main-panel px-4">
+      <div className="mx-auto w-full max-w-[44rem] flex flex-1 flex-col gap-6 py-8">
+        {/* User message */}
+        <div className="flex justify-end">
+          <Skeleton className="h-12 w-56 rounded-2xl" />
+        </div>
+
+        {/* Assistant message */}
+        <div className="flex flex-col gap-2">
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="h-4 w-[85%]" />
+          <Skeleton className="h-18 w-[40%]" />
+        </div>
+
+        {/* User message */}
+        <div className="flex gap-2 justify-end">
+          <Skeleton className="h-12 w-72 rounded-2xl" />
+        </div>
+
+        {/* Assistant message */}
+        <div className="flex flex-col gap-2">
+          <Skeleton className="h-10 w-[30%]" />
+          <Skeleton className="h-4 w-[90%]" />
+          <Skeleton className="h-6 w-[60%]" />
+        </div>
+
+        {/* User message */}
+        <div className="flex gap-2 justify-end">
+          <Skeleton className="h-12 w-96 rounded-2xl" />
+        </div>
+      </div>
+
+      {/* Input bar */}
+      <div className="sticky bottom-0 pb-6 bg-main-panel">
+        <div className="mx-auto w-full max-w-[44rem]">
+          <Skeleton className="h-24 w-full rounded-2xl" />
+        </div>
+      </div>
+    </div>
+  );
+}

From 80ede9849ab5feed4c0cb3be0935422315811d1f Mon Sep 17 00:00:00 2001
From: JoeMakuta <makutajosue@gmail.com>
Date: Thu, 26 Mar 2026 12:19:18 +0200
Subject: [PATCH 2/3] Add loading od logs route

---
 .../[search_space_id]/logs/loading.tsx        | 136 ++++++++++++++++++
 1 file changed, 136 insertions(+)
 create mode 100644 surfsense_web/app/dashboard/[search_space_id]/logs/loading.tsx

diff --git a/surfsense_web/app/dashboard/[search_space_id]/logs/loading.tsx b/surfsense_web/app/dashboard/[search_space_id]/logs/loading.tsx
new file mode 100644
index 000000000..318c2836b
--- /dev/null
+++ b/surfsense_web/app/dashboard/[search_space_id]/logs/loading.tsx
@@ -0,0 +1,136 @@
+"use client";
+
+import { motion } from "motion/react";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function Loading() {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3 }}
+      className="w-full px-6 py-4 space-y-6 min-h-[calc(100vh-64px)]"
+    >
+      {/* Summary Dashboard Skeleton */}
+      <motion.div
+        className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+      >
+        {[...Array(4)].map((_, i) => (
+          <div key={i} className="rounded-lg border p-4">
+            <div className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <Skeleton className="h-4 w-24" />
+              <Skeleton className="h-4 w-4 rounded-full" />
+            </div>
+            <div className="space-y-2">
+              <Skeleton className="h-8 w-16" />
+              <Skeleton className="h-3 w-32" />
+            </div>
+          </div>
+        ))}
+      </motion.div>
+
+      {/* Header Section Skeleton */}
+      <motion.div
+        className="flex items-center justify-between"
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.1 }}
+      >
+        <div className="space-y-2">
+          <Skeleton className="h-8 w-48" />
+          <Skeleton className="h-4 w-64" />
+        </div>
+        <Skeleton className="h-9 w-24" />
+      </motion.div>
+
+      {/* Filters Skeleton */}
+      <motion.div
+        className="flex flex-wrap items-center justify-start gap-3 w-full"
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.2 }}
+      >
+        <div className="flex items-center gap-3 flex-wrap w-full sm:w-auto">
+          <Skeleton className="h-9 w-full sm:w-60" />
+          <Skeleton className="h-9 w-24" />
+          <Skeleton className="h-9 w-24" />
+          <Skeleton className="h-9 w-20" />
+        </div>
+      </motion.div>
+
+      {/* Table Skeleton */}
+      <motion.div
+        className="rounded-md border overflow-hidden"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.3 }}
+      >
+        {/* Table Header */}
+        <div className="border-b bg-muted/50 px-4 py-3 flex items-center gap-4">
+          <Skeleton className="h-4 w-4" />
+          <Skeleton className="h-4 w-16" />
+          <Skeleton className="h-4 w-20" />
+          <Skeleton className="h-4 w-24" />
+          <Skeleton className="h-4 flex-1" />
+          <Skeleton className="h-4 w-24" />
+          <Skeleton className="h-4 w-8" />
+        </div>
+
+        {/* Table Rows */}
+        {[...Array(6)].map((_, i) => (
+          <div
+            key={i}
+            className="border-b px-4 py-3 flex items-center gap-4 hover:bg-muted/50"
+          >
+            <Skeleton className="h-4 w-4" />
+            <Skeleton className="h-6 w-12 rounded-full" />
+            <Skeleton className="h-6 w-16 rounded-full" />
+            <div className="flex items-center gap-2">
+              <Skeleton className="h-4 w-4" />
+              <Skeleton className="h-4 w-20" />
+            </div>
+            <div className="flex-1 space-y-1">
+              <Skeleton className="h-4 w-32" />
+              <Skeleton className="h-3 w-48" />
+            </div>
+            <div className="space-y-1">
+              <Skeleton className="h-3 w-24" />
+              <Skeleton className="h-3 w-20" />
+            </div>
+            <Skeleton className="h-8 w-8" />
+          </div>
+        ))}
+      </motion.div>
+
+      {/* Pagination Skeleton */}
+      <div className="flex items-center justify-between gap-8 mt-4">
+        <motion.div
+          className="flex items-center gap-3"
+          initial={{ opacity: 0, x: -20 }}
+          animate={{ opacity: 1, x: 0 }}
+        >
+          <Skeleton className="h-4 w-20 max-sm:sr-only" />
+          <Skeleton className="h-9 w-16" />
+        </motion.div>
+
+        <motion.div
+          className="flex grow justify-end"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.2 }}
+        >
+          <Skeleton className="h-4 w-40" />
+        </motion.div>
+
+        <div className="flex items-center gap-2">
+          <Skeleton className="h-9 w-9" />
+          <Skeleton className="h-9 w-9" />
+          <Skeleton className="h-9 w-9" />
+          <Skeleton className="h-9 w-9" />
+        </div>
+      </div>
+    </motion.div>
+  );
+}

From d535851ad51ad574fd99664ec553c13786b0e5b5 Mon Sep 17 00:00:00 2001
From: JoeMakuta <makutajosue@gmail.com>
Date: Thu, 26 Mar 2026 12:44:46 +0200
Subject: [PATCH 3/3] Add loader to more-pages route

---
 .../dashboard/[search_space_id]/more-pages/loading.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 surfsense_web/app/dashboard/[search_space_id]/more-pages/loading.tsx

diff --git a/surfsense_web/app/dashboard/[search_space_id]/more-pages/loading.tsx b/surfsense_web/app/dashboard/[search_space_id]/more-pages/loading.tsx
new file mode 100644
index 000000000..9a0c45f3f
--- /dev/null
+++ b/surfsense_web/app/dashboard/[search_space_id]/more-pages/loading.tsx
@@ -0,0 +1,10 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function Loading() {
+  return (
+    <div className="flex flex-1 flex-col items-center justify-center gap-4 p-4">
+      <Skeleton className="h-4 w-64" />
+      <Skeleton className="h-32 w-full max-w-2xl rounded-xl" />
+    </div>
+  );
+}