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

105
app/dashboard/orders/[id]/loading.tsx Normal file
View File

@@ -0,0 +1,105 @@
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 OrderDetailLoading() {
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-9 w-9 rounded-full" />
<Skeleton className="h-8 w-48" />
</div>
<Skeleton className="h-9 w-24" />
</div>
<div className="grid gap-6 md:grid-cols-2">
{/* Order Info Card */}
<Card className="relative overflow-hidden md:col-span-1">
<CardHeader>
<CardTitle>
<Skeleton className="h-6 w-36" />
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
{[...Array(6)].map((_, i) => (
<div key={i} className="flex justify-between">
<Skeleton className="h-4 w-24" />
<Skeleton className="h-4 w-32" />
</div>
))}
</CardContent>
</Card>
{/* Customer Info Card */}
<Card className="relative overflow-hidden md:col-span-1">
<CardHeader>
<CardTitle>
<Skeleton className="h-6 w-36" />
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
{[...Array(4)].map((_, i) => (
<div key={i} className="flex justify-between">
<Skeleton className="h-4 w-24" />
<Skeleton className="h-4 w-32" />
</div>
))}
</CardContent>
</Card>
{/* Order Items Card */}
<Card className="relative overflow-hidden md:col-span-2">
<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 order details...</p>
</div>
</div>
<CardHeader>
<CardTitle>
<Skeleton className="h-6 w-36" />
</CardTitle>
</CardHeader>
<CardContent className="opacity-30">
<div className="space-y-4">
{[...Array(3)].map((_, i) => (
<div key={i} className="flex items-center gap-4 p-3 border rounded-lg">
<Skeleton className="h-14 w-14 rounded-md" />
<div className="space-y-2 flex-1">
<Skeleton className="h-5 w-full max-w-[200px]" />
<Skeleton className="h-4 w-32" />
</div>
<div className="text-right">
<Skeleton className="h-5 w-20 ml-auto" />
<Skeleton className="h-4 w-16 ml-auto mt-2" />
</div>
</div>
))}
</div>
<div className="border-t mt-6 pt-4">
<div className="space-y-2">
{[...Array(3)].map((_, i) => (
<div key={i} className="flex justify-between">
<Skeleton className="h-4 w-28" />
<Skeleton className="h-4 w-20" />
</div>
))}
<div className="flex justify-between pt-2 border-t mt-2">
<Skeleton className="h-6 w-32" />
<Skeleton className="h-6 w-24" />
</div>
</div>
</div>
</CardContent>
</Card>
</div>
</div>
</Layout>
);
}