|
| 1 | +'use client'; |
| 2 | + |
| 3 | +import { Suspense } from 'react'; |
| 4 | + |
| 5 | +import { ArrowUp } from 'lucide-react'; |
| 6 | + |
| 7 | +import { IconButton } from '@/components/agentex/icon-button'; |
1 | 8 | import { Skeleton } from '@/components/ui/skeleton'; |
| 9 | +import { useSafeSearchParams } from '@/hooks/use-safe-search-params'; |
| 10 | + |
| 11 | +function LoadingContent() { |
| 12 | + const { taskID } = useSafeSearchParams(); |
| 13 | + |
| 14 | + // If there's a task ID, show the task/chat loading state |
| 15 | + if (taskID) { |
| 16 | + return ( |
| 17 | + <div className="fixed inset-0 flex w-full"> |
| 18 | + {/* Sidebar Skeleton */} |
| 19 | + <div className="bg-sidebar border-sidebar-border flex h-full w-64 flex-col border-r"> |
| 20 | + {/* Header Section */} |
| 21 | + <div className="border-sidebar-border border-b pt-4 pr-4 pb-6 pl-2"> |
| 22 | + <div className="flex items-center gap-2 pb-4 pl-2"> |
| 23 | + <Skeleton className="h-6 w-24" /> |
| 24 | + </div> |
| 25 | + <Skeleton className="h-10 w-full" /> |
| 26 | + </div> |
| 27 | + |
| 28 | + {/* Task List */} |
| 29 | + <div className="flex flex-col gap-5 overflow-y-auto py-4 pr-2 pl-4"> |
| 30 | + {[...Array(8)].map((_, i) => ( |
| 31 | + <Skeleton key={i} className="h-5 w-full" /> |
| 32 | + ))} |
| 33 | + </div> |
| 34 | + </div> |
| 35 | + |
| 36 | + {/* Main Content Area Skeleton */} |
| 37 | + <div className="bg-task-background flex h-full flex-1 flex-col"> |
| 38 | + {/* Top Bar */} |
| 39 | + <div className="border-border border-b px-4 py-3"> |
| 40 | + <Skeleton className="h-8 w-48" /> |
| 41 | + </div> |
| 42 | + |
| 43 | + {/* Messages Area */} |
| 44 | + <div className="flex flex-1 flex-col items-center overflow-y-auto px-4 pt-4"> |
| 45 | + <div className="flex w-full max-w-[800px] flex-col gap-4"> |
| 46 | + {/* User Message Skeleton */} |
| 47 | + <div className="flex justify-end"> |
| 48 | + <Skeleton className="h-15 w-1/4 rounded-lg" /> |
| 49 | + </div> |
| 50 | + |
| 51 | + {/* Agent Message Skeleton */} |
| 52 | + <div className="flex flex-col justify-start gap-3"> |
| 53 | + <Skeleton className="h-4 w-5/6" /> |
| 54 | + <Skeleton className="h-4 w-7/8" /> |
| 55 | + <Skeleton className="h-4 w-5/8" /> |
| 56 | + </div> |
| 57 | + |
| 58 | + {/* User Message Skeleton */} |
| 59 | + <div className="flex justify-end"> |
| 60 | + <Skeleton className="h-15 w-1/4 rounded-lg" /> |
| 61 | + </div> |
| 62 | + |
| 63 | + {/* Agent Message Skeleton */} |
| 64 | + <div className="flex flex-col justify-start gap-3"> |
| 65 | + <Skeleton className="h-4 w-5/6" /> |
| 66 | + <Skeleton className="h-4 w-7/8" /> |
| 67 | + <Skeleton className="h-4 w-5/8" /> |
| 68 | + </div> |
| 69 | + </div> |
| 70 | + </div> |
| 71 | + |
| 72 | + {/* Input Form Skeleton */} |
| 73 | + <div className="flex w-full justify-center px-4 py-8 sm:px-6 md:px-8"> |
| 74 | + <div className="w-full max-w-3xl"> |
| 75 | + <Skeleton className="h-[58px] w-full rounded-full" /> |
| 76 | + </div> |
| 77 | + </div> |
| 78 | + </div> |
| 79 | + </div> |
| 80 | + ); |
| 81 | + } |
2 | 82 |
|
3 | | -export default function Loading() { |
4 | 83 | return ( |
5 | | - <> |
6 | | - <header className="w-full md:sticky mt-4 md:top-0 md:z-10 bg-background"> |
7 | | - <div className="mx-auto max-w-[min(100%-var(--spacing)*4,var(--max-page-content-width))]"> |
8 | | - <h1>Agentex: loading...</h1> |
| 84 | + <div className="fixed inset-0 flex w-full"> |
| 85 | + <div className="flex h-full flex-1 flex-col justify-center"> |
| 86 | + <div className="flex items-center justify-center"> |
| 87 | + <div className="flex flex-col items-center justify-center gap-6 px-4"> |
| 88 | + <div className="text-2xl font-bold">Select an Agent:</div> |
| 89 | + <div className="flex max-w-4xl flex-wrap items-center justify-center gap-2"> |
| 90 | + {[...Array(6)].map((_, i) => ( |
| 91 | + <Skeleton key={i} className="h-9.5 w-32 rounded-full" /> |
| 92 | + ))} |
| 93 | + </div> |
| 94 | + </div> |
| 95 | + </div> |
| 96 | + <div className="flex w-full justify-center px-4 py-8 sm:px-6 md:px-8"> |
| 97 | + <div className="w-full max-w-3xl"> |
| 98 | + <div className="w-full opacity-50"> |
| 99 | + <div className="border-input dark:bg-input/30 disabled:bg-muted flex w-full justify-between rounded-full border bg-transparent py-2 pr-2 pl-6 disabled:cursor-not-allowed"> |
| 100 | + <input |
| 101 | + type="text" |
| 102 | + value="" |
| 103 | + disabled |
| 104 | + placeholder="Select an agent to start" |
| 105 | + className="mr-2 flex-1 outline-none focus:ring-0 focus:outline-none" |
| 106 | + readOnly |
| 107 | + /> |
| 108 | + <IconButton |
| 109 | + className="pointer-events-auto size-10 rounded-full" |
| 110 | + disabled |
| 111 | + icon={ArrowUp} |
| 112 | + /> |
| 113 | + </div> |
| 114 | + </div> |
| 115 | + </div> |
9 | 116 | </div> |
10 | | - </header> |
11 | | - <main className="w-full"> |
12 | | - <Skeleton className="mx-auto w-[min(100%-var(--spacing)*4,var(--max-page-content-width))] h-96 animate-pulse" /> |
13 | | - </main> |
14 | | - </> |
| 117 | + </div> |
| 118 | + </div> |
| 119 | + ); |
| 120 | +} |
| 121 | + |
| 122 | +export default function Loading() { |
| 123 | + return ( |
| 124 | + <Suspense fallback={<div>Loading...</div>}> |
| 125 | + <LoadingContent /> |
| 126 | + </Suspense> |
15 | 127 | ); |
16 | 128 | } |
0 commit comments