From 30c0103b0675d190ae1ce3205b80138f1d24428e Mon Sep 17 00:00:00 2001
From: ghaddaditw <40211818-ghaddaditw@users.noreply.replit.com>
Date: Sun, 8 Jun 2025 16:13:40 +0000
Subject: [PATCH] Improve loading appearance on the chat page and fix task
 retrieval

Updates the ChatPage to display skeleton loaders and fixes task fetching logic on TasksPage.tsx.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d7e7c4e8-20cb-41c4-9d0e-79f48938fede
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/9777c70b-fc38-4831-8d6b-78dfffe041b0/770bda08-8bb3-4f8f-a35e-cc26aba28071.jpg
---
 client/src/pages/ChatPage.tsx  | 35 +++++++++++++++++++++++++++-------
 client/src/pages/TasksPage.tsx |  7 +++++--
 2 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/client/src/pages/ChatPage.tsx b/client/src/pages/ChatPage.tsx
index 036cf75..63d3f70 100644
--- a/client/src/pages/ChatPage.tsx
+++ b/client/src/pages/ChatPage.tsx
@@ -214,13 +214,34 @@ export default function ChatPage() {
     return (
       <div className="flex h-screen bg-gray-50 dark:bg-gray-900">
         <Sidebar className="w-64 border-r" />
-        <div className="flex-1 overflow-auto p-6">
-          <div className="animate-pulse space-y-4">
-            <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-1/4"></div>
-            <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2"></div>
-            <div className="grid grid-cols-3 gap-4 h-96">
-              <div className="bg-gray-200 dark:bg-gray-700 rounded"></div>
-              <div className="col-span-2 bg-gray-200 dark:bg-gray-700 rounded"></div>
+        <div className="flex-1 flex">
+          {/* Chat List Skeleton */}
+          <div className="w-80 border-r border-border bg-background">
+            <div className="p-4 border-b">
+              <PageHeader title="Messages" description="Your conversations" />
+            </div>
+            <div className="p-4 space-y-3">
+              {Array.from({ length: 8 }).map((_, i) => (
+                <ListSkeleton key={i} />
+              ))}
+            </div>
+          </div>
+          
+          {/* Chat Content Skeleton */}
+          <div className="flex-1 flex flex-col">
+            <div className="p-4 border-b">
+              <div className="flex items-center space-x-3">
+                <div className="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse"></div>
+                <div className="space-y-2">
+                  <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-32 animate-pulse"></div>
+                  <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-24 animate-pulse"></div>
+                </div>
+              </div>
+            </div>
+            <div className="flex-1 p-4 space-y-4">
+              {Array.from({ length: 6 }).map((_, i) => (
+                <MessageSkeleton key={i} isOwn={i % 3 === 0} />
+              ))}
             </div>
           </div>
         </div>
diff --git a/client/src/pages/TasksPage.tsx b/client/src/pages/TasksPage.tsx
index f6b6f42..5b29b95 100644
--- a/client/src/pages/TasksPage.tsx
+++ b/client/src/pages/TasksPage.tsx
@@ -34,15 +34,18 @@ export default function TasksPage() {
   });
 
   // Fetch tasks
-  const { data: tasks, isLoading } = useQuery({
+  const { data: tasksData, isLoading } = useQuery({
     queryKey: ['/api/tasks'],
     queryFn: async () => {
       const response = await fetch('/api/tasks');
       if (!response.ok) throw new Error('Failed to fetch tasks');
-      return response.json();
+      const data = await response.json();
+      return data;
     }
   });
 
+  const tasks = tasksData?.tasks || [];
+
   // Filter and sort tasks
   const filteredAndSortedTasks = useMemo(() => {
     if (!tasks) return [];