Merge pull request #985 from JoeMakuta/fix/loading-dashboard-routes

fix : loading dashboard routes

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

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

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">
+			<Loading />
-				<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>
 		);
 	}
 

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