skeleton loaders for recent chats

3 files changed, 71 insertions, 41 deletions

diff --git a/apps/web/app/(dash)/home/history.tsx b/apps/web/app/(dash)/home/history.tsx
new file mode 100644
index 00000000..9c6757e5
--- /dev/null
+++ b/apps/web/app/(dash)/home/history.tsx
@@ -0,0 +1,50 @@
+import { getRecentChats } from "@/app/actions/fetchers";
+import { ArrowLongRightIcon } from "@heroicons/react/24/outline";
+import { Skeleton } from "@repo/ui/shadcn/skeleton";
+import Link from "next/link";
+import { memo, useEffect, useState } from "react";
+import { motion } from "framer-motion";
+
+const History = memo(() => {
+	const [chatThreads, setChatThreads] = useState(null);
+
+	useEffect(() => {
+		(async () => {
+			const chatThreads = await getRecentChats();
+
+			// @ts-ignore
+			setChatThreads(chatThreads);
+		})();
+	}, []);
+
+	if (!chatThreads) {
+		return (
+			<>
+			<Skeleton className="w-[80%] h-4 bg-[#3b444b] "></Skeleton>
+			<Skeleton className="w-[40%] h-4 bg-[#3b444b] "></Skeleton>
+			<Skeleton className="w-[60%] h-4 bg-[#3b444b] "></Skeleton>
+		</>
+		);
+	}
+
+	// @ts-ignore, time wastage
+	if (!chatThreads.success || !chatThreads.data) {
+		return <div>Error fetching chat threads</div>;
+	}
+
+	return (
+		<ul className="text-base list-none space-y-3 text-[#b9b9b9]">
+			{/* @ts-ignore */}
+			{chatThreads.data.map((thread) => (
+				<motion.li initial={{opacity: 0, filter: "blur(1px)"}} animate={{opacity: 1, filter: "blur(0px)"}} className="flex items-center gap-2 truncate">
+					<ArrowLongRightIcon className="h-5" />{" "}
+					<Link prefetch={false} href={`/chat/${thread.id}`}>
+						{thread.firstMessage}
+					</Link>
+				</motion.li>
+			))}
+		</ul>
+	);
+});
+
+export default History;
\ No newline at end of file
diff --git a/apps/web/app/(dash)/home/page.tsx b/apps/web/app/(dash)/home/page.tsx
index 7572056a..2b9e3d63 100644
--- a/apps/web/app/(dash)/home/page.tsx
+++ b/apps/web/app/(dash)/home/page.tsx
@@ -1,9 +1,8 @@
 "use client";
 
-import React, { Suspense, memo, use, useEffect, useState } from "react";
+import React, {  useEffect, useState } from "react";
 import QueryInput from "./queryinput";
 import {
-	getRecentChats,
 	getSessionAuthToken,
 	getSpaces,
 } from "@/app/actions/fetchers";
@@ -11,8 +10,7 @@ import { useRouter } from "next/navigation";
 import { createChatThread, linkTelegramToUser } from "@/app/actions/doers";
 import { toast } from "sonner";
 import { Heading } from "./heading";
-import { ArrowLongRightIcon } from "@heroicons/react/24/outline";
-import Link from "next/link";
+import History from "./history";
 
 const linkTelegram = async (telegramUser: string) => {
 	const response = await linkTelegramToUser(telegramUser);
@@ -87,45 +85,12 @@ function Page({
 					initialSpaces={spaces}
 				/>
 			</div>
-			<History />
+			<div className="space-y-5">
+				<h3 className="text-lg">Recent Searches</h3>
+				<History />
+			</div>
 		</div>
 	);
 }
 
-const History = memo(() => {
-	const [chatThreads, setChatThreads] = useState(null);
-
-	useEffect(() => {
-		(async () => {
-			const chatThreads = await getRecentChats();
-
-			setChatThreads(chatThreads);
-		})();
-	}, []);
-
-	if (!chatThreads){
-		return <div>Loading</div>;
-	}
-
-	if (!chatThreads.success || !chatThreads.data) {
-		return <div>Error fetching chat threads</div>;
-	}
-
-	return (
-		<div className="space-y-5">
-			<h3 className="text-lg">Recent Searches</h3>
-			<ul className="text-base list-none space-y-3 text-[#b9b9b9]">
-				{chatThreads.data.map((thread) => (
-					<li className="flex items-center gap-2 truncate">
-						<ArrowLongRightIcon className="h-5" />{" "}
-						<Link prefetch={false} href={`/chat/${thread.id}`}>
-							{thread.firstMessage}
-						</Link>
-					</li>
-				))}
-			</ul>
-		</div>
-	);
-});
-
 export default Page;
diff --git a/packages/ui/shadcn/skeleton.tsx b/packages/ui/shadcn/skeleton.tsx
new file mode 100644
index 00000000..001c280d
--- /dev/null
+++ b/packages/ui/shadcn/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from "../lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }