erm what the sigma
This commit is contained in:
NotII
100
app/dashboard/chats/[id]/loading.tsx
Normal file
100
app/dashboard/chats/[id]/loading.tsx
Normal 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
15
app/dashboard/chats/loading.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
78
app/dashboard/loading.tsx
Normal file
78
app/dashboard/loading.tsx
Normal file
@@ -0,0 +1,78 @@
|
||||
"use client"
|
||||
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import Layout from "@/components/layout/layout";
|
||||
import { Loader2 } from "lucide-react";
|
||||
|
||||
export default function DashboardLoading() {
|
||||
return (
|
||||
<Layout>
|
||||
<div className="space-y-6 animate-in fade-in duration-500">
|
||||
{/* Header skeleton with greeting & quote */}
|
||||
<div>
|
||||
<Skeleton className="h-8 w-72 mb-2" />
|
||||
<Skeleton className="h-4 w-96" />
|
||||
</div>
|
||||
|
||||
{/* Order statistics skeletons */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{[...Array(4)].map((_, i) => (
|
||||
<Card key={i} className="border-border/40 shadow-sm">
|
||||
<CardHeader className="pb-2">
|
||||
<CardDescription>
|
||||
<Skeleton className="h-4 w-24" />
|
||||
</CardDescription>
|
||||
<div className="flex justify-between items-center">
|
||||
<CardTitle>
|
||||
<Skeleton className="h-7 w-16" />
|
||||
</CardTitle>
|
||||
<Skeleton className="h-8 w-8 rounded-full" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Best selling products skeleton */}
|
||||
<Card className="border-border/40 shadow-sm mt-8 relative">
|
||||
<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
|
||||
<div className="flex flex-col items-center justify-center bg-background/80 backdrop-blur-[2px] p-6 rounded-lg">
|
||||
<Loader2 className="h-12 w-12 animate-spin text-primary mb-4" />
|
||||
<p className="text-lg font-medium">Loading dashboard data...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||||
<div>
|
||||
<CardTitle>
|
||||
<Skeleton className="h-6 w-52" />
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
<Skeleton className="h-4 w-80 mt-1" />
|
||||
</CardDescription>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="opacity-30">
|
||||
<div className="space-y-4">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<div key={i} className="flex items-center gap-4">
|
||||
<Skeleton className="h-12 w-12 rounded-md" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-40" />
|
||||
<Skeleton className="h-4 w-20" />
|
||||
</div>
|
||||
<div className="ml-auto text-right">
|
||||
<Skeleton className="h-4 w-16 ml-auto" />
|
||||
<Skeleton className="h-4 w-16 ml-auto mt-2" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
105
app/dashboard/orders/[id]/loading.tsx
Normal file
105
app/dashboard/orders/[id]/loading.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
15
app/dashboard/orders/loading.tsx
Normal file
15
app/dashboard/orders/loading.tsx
Normal file
@@ -0,0 +1,15 @@
|
||||
import Layout from "@/components/layout/layout";
|
||||
import PageLoading from "@/components/dashboard/page-loading";
|
||||
|
||||
export default function OrdersLoading() {
|
||||
return (
|
||||
<Layout>
|
||||
<PageLoading
|
||||
title="Loading orders..."
|
||||
subtitle="Please wait while we fetch your order history"
|
||||
layout="table"
|
||||
itemsCount={10}
|
||||
/>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
15
app/dashboard/products/loading.tsx
Normal file
15
app/dashboard/products/loading.tsx
Normal file
@@ -0,0 +1,15 @@
|
||||
import Layout from "@/components/layout/layout";
|
||||
import PageLoading from "@/components/dashboard/page-loading";
|
||||
|
||||
export default function ProductsLoading() {
|
||||
return (
|
||||
<Layout>
|
||||
<PageLoading
|
||||
title="Loading products..."
|
||||
subtitle="Please wait while we fetch your store's product data"
|
||||
layout="grid"
|
||||
itemsCount={8}
|
||||
/>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user