100 lines
4.1 KiB
TypeScript
100 lines
4.1 KiB
TypeScript
import Layout from "@/components/layout/layout";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { Loader2 } from "lucide-react";
|
|
|
|
export default function ChatDetailLoading() {
|
|
return (
|
|
<Layout>
|
|
<div className="space-y-6 animate-in fade-in duration-300">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<Skeleton className="h-10 w-10 rounded-full" />
|
|
<Skeleton className="h-7 w-48" />
|
|
</div>
|
|
<Skeleton className="h-9 w-24" />
|
|
</div>
|
|
|
|
{/* Chat window */}
|
|
<div className="border rounded-lg h-[calc(100vh-12rem)] flex flex-col relative">
|
|
{/* Chat messages area */}
|
|
<div className="flex-1 p-4 overflow-hidden">
|
|
<div className="absolute inset-0 flex items-center justify-center z-10 pointer-events-none">
|
|
<div className="flex flex-col items-center justify-center bg-background/80 backdrop-blur-sm p-6 rounded-lg">
|
|
<Loader2 className="h-10 w-10 animate-spin text-primary mb-3" />
|
|
<p className="text-lg font-medium">Loading messages...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-6 opacity-30">
|
|
{/* Customer messages */}
|
|
<div className="flex justify-end mb-4">
|
|
<div className="space-y-2 max-w-[80%]">
|
|
<div className="flex items-center justify-end gap-2">
|
|
<Skeleton className="h-4 w-32" />
|
|
<Skeleton className="h-8 w-8 rounded-full" />
|
|
</div>
|
|
<div className="bg-primary/10 rounded-lg p-3 rounded-tr-none">
|
|
<Skeleton className="h-4 w-64" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Vendor messages */}
|
|
<div className="flex mb-4">
|
|
<div className="space-y-2 max-w-[80%]">
|
|
<div className="flex items-center gap-2">
|
|
<Skeleton className="h-8 w-8 rounded-full" />
|
|
<Skeleton className="h-4 w-24" />
|
|
</div>
|
|
<div className="bg-card rounded-lg p-3 rounded-tl-none">
|
|
<Skeleton className="h-4 w-48" />
|
|
<Skeleton className="h-4 w-32 mt-2" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Customer messages */}
|
|
<div className="flex justify-end mb-4">
|
|
<div className="space-y-2 max-w-[80%]">
|
|
<div className="flex items-center justify-end gap-2">
|
|
<Skeleton className="h-4 w-32" />
|
|
<Skeleton className="h-8 w-8 rounded-full" />
|
|
</div>
|
|
<div className="bg-primary/10 rounded-lg p-3 rounded-tr-none">
|
|
<Skeleton className="h-4 w-40" />
|
|
<Skeleton className="h-4 w-56 mt-2" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Vendor messages */}
|
|
<div className="flex mb-4">
|
|
<div className="space-y-2 max-w-[80%]">
|
|
<div className="flex items-center gap-2">
|
|
<Skeleton className="h-8 w-8 rounded-full" />
|
|
<Skeleton className="h-4 w-24" />
|
|
</div>
|
|
<div className="bg-card rounded-lg p-3 rounded-tl-none">
|
|
<Skeleton className="h-4 w-64" />
|
|
<Skeleton className="h-4 w-40 mt-2" />
|
|
<Skeleton className="h-4 w-48 mt-2" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Chat input area */}
|
|
<div className="p-4 border-t">
|
|
<div className="flex gap-2">
|
|
<Skeleton className="h-10 flex-1 rounded-lg" />
|
|
<Skeleton className="h-10 w-10 rounded-lg" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|