e7fcfd63a2
Introduces a Christmas theme that activates in December, including themed colors, subtle background patterns, and snowflake effects on loading screens. Adds a reusable SnowLoader component and utility for December detection. Updates layout and loading components to conditionally apply decorations and styles only during December.
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/ui/card";
|
|
import { Skeleton } from "@/components/ui/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>
|
|
);
|
|
}
|