g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

erm what the sigma

Browse Source
This commit is contained in:
NotII
2025-03-24 13:43:42 +00:00
parent 6fafe69f2c
commit edcd0c1e06
11 changed files with 562 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
app/dashboard/chats/[id]/loading.tsx Normal file
View File

@@ -0,0 +1,100 @@
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>
);
}

15
app/dashboard/chats/loading.tsx Normal file
View File

@@ -0,0 +1,15 @@
import Layout from "@/components/layout/layout";
import PageLoading from "@/components/dashboard/page-loading";
export default function ChatsLoading() {
return (
<Layout>
<PageLoading
title="Loading conversations..."
subtitle="Please wait while we fetch your chat messages"
layout="list"
itemsCount={7}
/>
</Layout>
);
}