fe01f31538
Some checks failed
Build Frontend / build (push) Failing after 7s
Replaces imports from 'components/ui' with 'components/common' across the app and dashboard pages, and updates model and API imports to use new paths under 'lib'. Removes redundant authentication checks from several dashboard pages. Adds new dashboard components and utility files, and reorganizes hooks and services into the 'lib' directory for improved structure.
102 lines
4.3 KiB
TypeScript
102 lines
4.3 KiB
TypeScript
import Layout from "@/components/layout/layout";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/common/card";
|
|
import { Skeleton } from "@/components/common/skeleton";
|
|
import { Loader2 } from "lucide-react";
|
|
import { SnowLoader } from "@/components/snow-loader";
|
|
|
|
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">
|
|
<SnowLoader className="z-0" count={20} />
|
|
{/* 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>
|
|
);
|
|
}
|