"use client"
import { Spinner } from "@/components/ui/spinner"
export default function LoadingSpinnerSimple() {
return (
<section
dir="rtl"
lang="fa"
className="mx-auto flex min-h-svh max-w-sm flex-col items-center justify-center gap-4 px-6 py-16"
aria-busy="true"
aria-live="polite"
>
<Spinner className="size-8" />
<p className="text-sm text-muted-foreground">در حال بارگذاری…</p>
</section>
)
}
"use client"
import {
Card,
CardContent,
CardHeader,
} from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"
export default function LoadingCardSkeleton() {
return (
<section
dir="rtl"
lang="fa"
className="mx-auto flex min-h-svh max-w-md flex-col justify-center px-6 py-16 md:px-10"
aria-busy="true"
aria-label="در حال بارگذاری کارت"
>
<Card>
<CardHeader className="gap-3 space-y-0">
<div className="flex items-center gap-3">
<Skeleton className="size-10 shrink-0 rounded-full" />
<div className="flex-1 space-y-2">
<Skeleton className="h-4 w-2/3" />
<Skeleton className="h-3 w-1/3" />
</div>
</div>
</CardHeader>
<CardContent className="space-y-3">
<Skeleton className="aspect-[16/9] w-full rounded-lg" />
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-5/6" />
<Skeleton className="h-4 w-2/3" />
<div className="flex gap-2 pt-2">
<Skeleton className="h-9 w-24" />
<Skeleton className="h-9 w-20" />
</div>
</CardContent>
</Card>
</section>
)
}
"use client"
import {
Card,
CardContent,
CardHeader,
} from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"
export default function LoadingListSkeleton() {
return (
<section
dir="rtl"
lang="fa"
className="mx-auto flex min-h-svh max-w-lg flex-col justify-center px-6 py-16 md:px-10"
aria-busy="true"
aria-label="در حال بارگذاری فهرست"
>
<div className="mb-4 space-y-2">
<Skeleton className="h-7 w-40" />
<Skeleton className="h-4 w-56" />
</div>
<Card>
<CardHeader className="flex-row items-center justify-between space-y-0">
<Skeleton className="h-5 w-28" />
<Skeleton className="h-8 w-20" />
</CardHeader>
<CardContent className="space-y-4">
{Array.from({ length: 5 }).map((_, i) => (
<div key={i} className="flex items-center gap-3">
<Skeleton className="size-10 shrink-0 rounded-full" />
<div className="min-w-0 flex-1 space-y-2">
<Skeleton className="h-4 w-3/4" />
<Skeleton className="h-3 w-1/2" />
</div>
<Skeleton className="h-8 w-16 shrink-0" />
</div>
))}
</CardContent>
</Card>
</section>
)
}
"use client"
import {
Card,
CardContent,
CardFooter,
CardHeader,
} from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"
export default function LoadingTableSkeleton() {
return (
<section
dir="rtl"
lang="fa"
className="mx-auto flex min-h-svh max-w-3xl flex-col justify-center px-6 py-16 md:px-10"
aria-busy="true"
aria-label="در حال بارگذاری جدول"
>
<div className="mb-4 flex flex-wrap items-end justify-between gap-3">
<div className="space-y-2">
<Skeleton className="h-7 w-36" />
<Skeleton className="h-4 w-48" />
</div>
<div className="flex gap-2">
<Skeleton className="h-9 w-28" />
<Skeleton className="h-9 w-24" />
</div>
</div>
<Card>
<CardHeader className="border-b py-3">
<div className="flex gap-4">
<Skeleton className="h-4 flex-1" />
<Skeleton className="h-4 w-24" />
<Skeleton className="h-4 w-20" />
<Skeleton className="h-4 w-16" />
</div>
</CardHeader>
<CardContent className="space-y-0 p-0">
{Array.from({ length: 6 }).map((_, i) => (
<div
key={i}
className="flex gap-4 border-b px-6 py-3.5 last:border-0"
>
<Skeleton className="h-4 flex-1" />
<Skeleton className="h-4 w-24" />
<Skeleton className="h-4 w-20" />
<Skeleton className="h-4 w-16" />
</div>
))}
</CardContent>
<CardFooter className="justify-between border-t">
<Skeleton className="h-4 w-32" />
<div className="flex gap-2">
<Skeleton className="size-8" />
<Skeleton className="size-8" />
</div>
</CardFooter>
</Card>
</section>
)
}
"use client"
import {
Card,
CardContent,
CardFooter,
CardHeader,
} from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"
export default function LoadingFormSkeleton() {
return (
<section
dir="rtl"
lang="fa"
className="mx-auto flex min-h-svh max-w-lg flex-col justify-center px-6 py-16 md:px-10"
aria-busy="true"
aria-label="در حال بارگذاری فرم"
>
<Card>
<CardHeader className="space-y-2 text-start">
<Skeleton className="h-6 w-40" />
<Skeleton className="h-4 w-64" />
</CardHeader>
<CardContent className="space-y-5">
<div className="space-y-2">
<Skeleton className="h-4 w-20" />
<Skeleton className="h-10 w-full" />
</div>
<div className="space-y-2">
<Skeleton className="h-4 w-24" />
<Skeleton className="h-10 w-full" />
</div>
<div className="grid gap-4 sm:grid-cols-2">
<div className="space-y-2">
<Skeleton className="h-4 w-16" />
<Skeleton className="h-10 w-full" />
</div>
<div className="space-y-2">
<Skeleton className="h-4 w-20" />
<Skeleton className="h-10 w-full" />
</div>
</div>
<div className="space-y-2">
<Skeleton className="h-4 w-28" />
<Skeleton className="h-24 w-full" />
</div>
<div className="flex items-center justify-between gap-2">
<Skeleton className="h-4 w-36" />
<Skeleton className="h-6 w-10 rounded-full" />
</div>
</CardContent>
<CardFooter className="gap-2 border-t">
<Skeleton className="h-10 flex-1" />
<Skeleton className="h-10 flex-1" />
</CardFooter>
</Card>
</section>
)
}
"use client"
import {
Card,
CardContent,
CardHeader,
} from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"
export default function LoadingDashboardSkeleton() {
return (
<section
dir="rtl"
lang="fa"
className="mx-auto flex min-h-svh max-w-5xl flex-col justify-center px-6 py-16 md:px-10"
aria-busy="true"
aria-label="در حال بارگذاری داشبورد"
>
<div className="mb-6 flex flex-wrap items-end justify-between gap-4">
<div className="space-y-2">
<Skeleton className="h-8 w-48" />
<Skeleton className="h-4 w-64" />
</div>
<Skeleton className="h-9 w-28" />
</div>
<div className="mb-4 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
{Array.from({ length: 4 }).map((_, i) => (
<Card key={i}>
<CardContent className="space-y-3 pt-6">
<Skeleton className="h-3 w-20" />
<Skeleton className="h-8 w-24" />
<Skeleton className="h-3 w-16" />
</CardContent>
</Card>
))}
</div>
<div className="grid gap-4 lg:grid-cols-[1.4fr_1fr]">
<Card>
<CardHeader className="space-y-2">
<Skeleton className="h-5 w-32" />
<Skeleton className="h-3 w-48" />
</CardHeader>
<CardContent>
<Skeleton className="h-56 w-full rounded-lg" />
</CardContent>
</Card>
<Card>
<CardHeader>
<Skeleton className="h-5 w-28" />
</CardHeader>
<CardContent className="space-y-4">
{Array.from({ length: 4 }).map((_, i) => (
<div key={i} className="flex items-center gap-3">
<Skeleton className="size-9 rounded-full" />
<div className="flex-1 space-y-2">
<Skeleton className="h-3 w-full" />
<Skeleton className="h-3 w-2/3" />
</div>
</div>
))}
</CardContent>
</Card>
</div>
</section>
)
}
"use client"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import { Spinner } from "@/components/ui/spinner"
export default function LoadingButtonsInline() {
return (
<section
dir="rtl"
lang="fa"
className="mx-auto flex min-h-svh max-w-lg flex-col justify-center px-6 py-16 md:px-10"
>
<Card>
<CardHeader className="text-start">
<Badge variant="secondary" className="mb-2 w-fit">
در حال پردازش
</Badge>
<CardTitle>اقدامات در حال بارگذاری</CardTitle>
<CardDescription>
اسپینر داخل دکمه، بج و متن
</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<div className="flex flex-wrap gap-3">
<Button disabled>
<Spinner data-icon="inline-start" />
ذخیره…
</Button>
<Button variant="outline" disabled>
<Spinner data-icon="inline-start" />
ارسال
</Button>
<Button variant="secondary" disabled size="icon" aria-label="بارگذاری">
<Spinner />
</Button>
</div>
<div className="flex flex-wrap gap-2">
<Badge variant="secondary">
<Spinner data-icon="inline-start" className="size-3" />
همگامسازی
</Badge>
<Badge variant="outline">
<Spinner data-icon="inline-start" className="size-3" />
در صف
</Badge>
</div>
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<Spinner className="size-4" />
در حال بارگذاری جزئیات سفارش…
</div>
</CardContent>
<CardFooter className="border-t text-xs text-muted-foreground">
وضعیت: در انتظار
</CardFooter>
</Card>
</section>
)
}
"use client"
import { Button } from "@/components/ui/button"
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import { Spinner } from "@/components/ui/spinner"
export default function LoadingOverlay() {
return (
<section
dir="rtl"
lang="fa"
className="mx-auto flex min-h-svh max-w-lg flex-col justify-center px-6 py-16 md:px-10"
>
<div className="relative">
<Card className="pointer-events-none select-none opacity-40 blur-[1px]">
<CardHeader className="text-start">
<CardTitle>تنظیمات حساب</CardTitle>
<CardDescription>نام، ایمیل و اعلانها</CardDescription>
</CardHeader>
<CardContent className="space-y-3 text-sm">
<p>مریم رضایی</p>
<bdi dir="ltr" className="block text-muted-foreground">
maryam@example.com
</bdi>
<Button className="w-full">ذخیره تغییرات</Button>
</CardContent>
</Card>
<div
className="absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-xl bg-background/70 backdrop-blur-[2px]"
aria-busy="true"
aria-live="polite"
>
<Spinner className="size-8" />
<p className="text-sm font-medium">در حال ذخیره…</p>
<p className="text-xs text-muted-foreground">لطفاً صبر کنید</p>
</div>
</div>
</section>
)
}
"use client"
import * as React from "react"
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"
import { Spinner } from "@/components/ui/spinner"
function toFa(n: number) {
return n.toLocaleString("fa-IR")
}
export default function LoadingProgress() {
const [value, setValue] = React.useState(12)
React.useEffect(() => {
const id = window.setInterval(() => {
setValue((v) => (v >= 92 ? 18 : v + 7))
}, 450)
return () => window.clearInterval(id)
}, [])
return (
<section
dir="rtl"
lang="fa"
className="mx-auto flex min-h-svh max-w-md flex-col justify-center px-6 py-16 md:px-10"
aria-busy="true"
>
<Card>
<CardHeader className="text-start">
<CardTitle>بارگذاری فایل</CardTitle>
<CardDescription>پیشرفت آپلود</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<div className="space-y-2">
<div className="flex justify-between text-sm tracking-normal">
<span className="text-muted-foreground">گزارش-فصل۳.pdf</span>
<span>{toFa(value)}٪</span>
</div>
<Progress value={value} />
</div>
<div className="space-y-2">
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">پردازش نامشخص</span>
<Spinner className="size-4" />
</div>
<div
className="h-2 w-full overflow-hidden rounded-full bg-primary/15"
role="progressbar"
aria-label="پیشرفت نامشخص"
>
<div className="h-full w-1/3 animate-[loading-slide_1.2s_ease-in-out_infinite] rounded-full bg-primary" />
</div>
</div>
<p className="flex items-center gap-2 text-sm text-muted-foreground">
<Spinner className="size-4" />
لطفاً پنجره را نبندید…
</p>
</CardContent>
</Card>
<style>{`
@keyframes loading-slide {
0% { transform: translateX(200%); }
100% { transform: translateX(-400%); }
}
`}</style>
</section>
)
}
"use client"
import {
Empty,
EmptyDescription,
EmptyHeader,
EmptyMedia,
EmptyTitle,
} from "@/components/ui/empty"
import { Spinner } from "@/components/ui/spinner"
export default function LoadingMediaGallery() {
return (
<section
dir="rtl"
lang="fa"
className="mx-auto flex min-h-svh max-w-lg flex-col items-center justify-center px-6 py-16 md:px-10"
aria-busy="true"
aria-label="در حال بارگذاری گالری"
>
<Empty className="rounded-xl border border-dashed py-10">
<EmptyHeader>
<EmptyMedia>
<Spinner className="size-8" />
</EmptyMedia>
<EmptyTitle>در حال آمادهسازی رسانه</EmptyTitle>
<EmptyDescription>
تصاویر و ویدیوها بهزودی نمایش داده میشوند.
</EmptyDescription>
</EmptyHeader>
</Empty>
</section>
)
}