georges/menassit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve loading appearance on the chat page and fix task retrieval

Browse Source 
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
This commit is contained in:
ghaddaditw
2025-06-08 16:13:40 +00:00
parent 92a4bf4643
commit 30c0103b06
2 changed files with 33 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/pages/ChatPage.tsx
+28 -7
View File
@@ -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>
client/src/pages/TasksPage.tsx
+5 -2
View File
@@ -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 [];