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] 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>
+  );
+}