From 2145340c11bfafc037f417f4e4e41b6593f3964e Mon Sep 17 00:00:00 2001
From: MaheshtheDev <38828053+MaheshtheDev@users.noreply.github.com>
Date: Wed, 29 Oct 2025 06:38:16 +0000
Subject: [PATCH] fix: skeleton and mobile chat improvments (#541)

### Improved mobile responsiveness across chat interface and memory list with better loading states.

### What changed?

- Added responsive padding in chat page for mobile devices
- Enhanced header layout for chat titles with proper truncation and responsive text sizes
- Replaced the simple loading spinner in memory list with skeleton loading cards
- Improved message container width constraints on mobile devices
---
 apps/web/app/(navigation)/chat/[id]/page.tsx  |  2 +-
 apps/web/components/header.tsx                |  8 +++--
 apps/web/components/masonry-memory-list.tsx   | 30 ++++++++++++++-----
 .../components/views/chat/chat-messages.tsx   |  2 +-
 4 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/apps/web/app/(navigation)/chat/[id]/page.tsx b/apps/web/app/(navigation)/chat/[id]/page.tsx
index b3812998..da64a79d 100644
--- a/apps/web/app/(navigation)/chat/[id]/page.tsx
+++ b/apps/web/app/(navigation)/chat/[id]/page.tsx
@@ -20,7 +20,7 @@ export default function ChatPage() {
 	return (
 		<div className="flex flex-col w-full">
 			<div className="flex flex-col h-[93vh]">
-				<div className="flex-1 flex justify-center min-h-0 w-full px-4">
+				<div className="flex-1 flex justify-center min-h-0 w-full md:px-4">
 					<div className="flex flex-col min-h-0 w-full max-w-4xl">
 						<ChatMessages />
 					</div>
diff --git a/apps/web/components/header.tsx b/apps/web/components/header.tsx
index 44bb1f74..1448588e 100644
--- a/apps/web/components/header.tsx
+++ b/apps/web/components/header.tsx
@@ -124,9 +124,11 @@ export function Header({ onAddMemory }: { onAddMemory?: () => void }) {
 						rel="noopener noreferrer"
 					>
 						{getCurrentChat()?.title && pathname.includes("/chat") ? (
-							<div className="flex items-center gap-4">
-								<Logo className="h-6 block text-foreground" />
-								<span className="truncate">{getCurrentChat()?.title}</span>
+							<div className="flex items-center gap-2 md:gap-4 min-w-0 max-w-[200px] md:max-w-md">
+								<Logo className="h-6 block text-foreground flex-shrink-0" />
+								<span className="truncate text-sm md:text-base">
+									{getCurrentChat()?.title}
+								</span>
 							</div>
 						) : (
 							<>
diff --git a/apps/web/components/masonry-memory-list.tsx b/apps/web/components/masonry-memory-list.tsx
index 0511a061..16cd65c9 100644
--- a/apps/web/components/masonry-memory-list.tsx
+++ b/apps/web/components/masonry-memory-list.tsx
@@ -214,14 +214,30 @@ export const MasonryMemoryList = ({
 						</div>
 					</div>
 				) : isLoading ? (
-					<div className="h-full flex items-center justify-center p-4">
-						<div className="rounded-xl overflow-hidden">
-							<div className="relative z-10 px-6 py-4">
-								<div className="flex items-center gap-2">
-									<Sparkles className="w-4 h-4 animate-spin text-blue-400" />
-									<span>Loading memory list...</span>
+					<div className="h-full overflow-auto px-4 pt-4">
+						<div
+							className={`grid gap-4 ${isMobile ? "grid-cols-1" : "grid-cols-2 md:grid-cols-3 lg:grid-cols-4"}`}
+						>
+							{Array.from({ length: 8 }, (_, i) => ({
+								id: `skeleton-${Math.random()}-${i}`,
+								height: 100 + (i % 3),
+							})).map((item) => (
+								<div
+									key={item.id}
+									className="rounded-xl border border-gray-200 dark:border-gray-800 p-4 animate-pulse"
+									style={{ height: `${item.height}px` }}
+								>
+									<div className="flex flex-col gap-3 h-full">
+										<div className="h-4 bg-gray-200 dark:bg-gray-800 rounded w-3/4" />
+										<div className="h-3 bg-gray-200 dark:bg-gray-800 rounded w-full" />
+										<div className="h-3 bg-gray-200 dark:bg-gray-800 rounded w-5/6" />
+										<div className="mt-auto flex gap-2">
+											<div className="h-6 w-16 bg-gray-200 dark:bg-gray-800 rounded-full" />
+											<div className="h-6 w-16 bg-gray-200 dark:bg-gray-800 rounded-full" />
+										</div>
+									</div>
 								</div>
-							</div>
+							))}
 						</div>
 					</div>
 				) : filteredDocuments.length === 0 && !isLoading ? (
diff --git a/apps/web/components/views/chat/chat-messages.tsx b/apps/web/components/views/chat/chat-messages.tsx
index babaa9a2..05e8afdf 100644
--- a/apps/web/components/views/chat/chat-messages.tsx
+++ b/apps/web/components/views/chat/chat-messages.tsx
@@ -428,7 +428,7 @@ export function ChatMessages() {
 						>
 							<div
 								className={cn(
-									"flex flex-col gap-2 max-w-4/5",
+									"flex flex-col gap-2 md:max-w-4/5",
 									message.role === "user"
 										? "bg-accent/50 px-3 py-1.5 border border-border rounded-lg"
 										: "",