اسکلتون (Skeleton)

نمایش‌دهنده بارگذاری برای محتوا.

نصب (Installation)

1npx @quark-lab/rad-ui add skeleton

نمونه‌ها (Examples)

استفاده پایه (Basic Usage)

Skeleton برای نمایش حالت بارگذاری محتوا استفاده می‌شود.

مشاهده کد

1import { Skeleton } from "@/components/ui/skeleton";
2
3export default function BasicExample() {
4  return (
5    <div className="space-y-2">
6      <Skeleton className="h-4 w-[250px]" />
7      <Skeleton className="h-4 w-[200px]" />
8    </div>
9  );
10}
11

اشکال رایج (Common Shapes)

با استفاده از className می‌توانید اندازه و شکل را تغییر دهید.

دایره (Circle)

مستطیل (Rectangle)

کارت (Card)

مشاهده کد

1import { Skeleton } from "@/components/ui/skeleton";
2
3export default function ShapesExample() {
4  return (
5    <div className="space-y-8">
6      {/* Circle */}
7      <div>
8        <h3 className="text-lg font-medium mb-3">دایره (Circle)</h3>
9        <div className="flex items-center gap-4">
10          <Skeleton className="h-12 w-12 rounded-full" />
11          <Skeleton className="h-16 w-16 rounded-full" />
12          <Skeleton className="h-20 w-20 rounded-full" />
13        </div>
14      </div>
15
16      {/* Rectangle */}
17      <div>
18        <h3 className="text-lg font-medium mb-3">مستطیل (Rectangle)</h3>
19        <div className="space-y-3">
20          <Skeleton className="h-4 w-full" />
21          <Skeleton className="h-4 w-5/6" />
22          <Skeleton className="h-4 w-4/6" />
23        </div>
24      </div>
25
26      {/* Card */}
27      <div>
28        <h3 className="text-lg font-medium mb-3">کارت (Card)</h3>
29        <Skeleton className="h-[125px] w-[250px] rounded-xl" />
30      </div>
31    </div>
32  );
33}
34

الگوهای رایج (Common Patterns)

الگوهای پرتکرار استفاده از Skeleton.

آواتار با متن (Avatar with Text)

مشاهده کد

1import { Skeleton } from "@/components/ui/skeleton";
2
3export default function AvatarWithTextExample() {
4  return (
5    <div className="flex items-center space-x-4 space-x-reverse">
6      <Skeleton className="h-12 w-12 rounded-full" />
7      <div className="space-y-2">
8        <Skeleton className="h-4 w-[250px]" />
9        <Skeleton className="h-4 w-[200px]" />
10      </div>
11    </div>
12  );
13}
14

کارت با تصویر (Card with Image)

مشاهده کد

1import { Skeleton } from "@/components/ui/skeleton";
2
3export default function CardWithImageExample() {
4  return (
5    <div className="flex flex-col space-y-3 max-w-sm">
6      <Skeleton className="h-[200px] w-full rounded-xl" />
7      <div className="space-y-2">
8        <Skeleton className="h-4 w-full" />
9        <Skeleton className="h-4 w-5/6" />
10      </div>
11    </div>
12  );
13}
14

آیتم‌های لیست (List Items)

مشاهده کد

1import { Skeleton } from "@/components/ui/skeleton";
2
3export default function ListItemsExample() {
4  return (
5    <div className="space-y-4">
6      {[...Array(3)].map((_, i) => (
7        <div key={i} className="flex items-center space-x-4 space-x-reverse">
8          <Skeleton className="h-10 w-10 rounded" />
9          <div className="space-y-2 flex-1">
10            <Skeleton className="h-4 w-3/4" />
11            <Skeleton className="h-3 w-1/2" />
12          </div>
13        </div>
14      ))}
15    </div>
16  );
17}
18

مثال‌های کاربردی (Practical Examples)

بارگذاری پست وبلاگ (Blog Post Loading)

شبیه‌سازی بارگذاری یک پست کامل وبلاگ.

مشاهده کد

1import { Skeleton } from "@/components/ui/skeleton";
2
3export default function BlogPostExample() {
4  return (
5    <div className="max-w-2xl space-y-4">
6      <Skeleton className="h-8 w-3/4" />
7      <div className="flex items-center space-x-2 space-x-reverse">
8        <Skeleton className="h-6 w-6 rounded-full" />
9        <Skeleton className="h-4 w-32" />
10        <Skeleton className="h-4 w-24" />
11      </div>
12      <Skeleton className="h-[200px] w-full rounded-lg" />
13      <div className="space-y-2">
14        <Skeleton className="h-4 w-full" />
15        <Skeleton className="h-4 w-full" />
16        <Skeleton className="h-4 w-5/6" />
17        <Skeleton className="h-4 w-4/6" />
18      </div>
19    </div>
20  );
21}
22

بارگذاری پروفایل کاربر (User Profile Loading)

شبیه‌سازی بارگذاری صفحه پروفایل کاربر.

مشاهده کد

1import { Skeleton } from "@/components/ui/skeleton";
2
3export default function UserProfileExample() {
4  return (
5    <div className="max-w-md space-y-6">
6      <div className="flex items-center space-x-4 space-x-reverse">
7        <Skeleton className="h-20 w-20 rounded-full" />
8        <div className="space-y-2 flex-1">
9          <Skeleton className="h-6 w-48" />
10          <Skeleton className="h-4 w-32" />
11        </div>
12      </div>
13      <div className="space-y-2">
14        <Skeleton className="h-4 w-full" />
15        <Skeleton className="h-4 w-5/6" />
16        <Skeleton className="h-4 w-4/6" />
17      </div>
18      <div className="flex gap-3">
19        <Skeleton className="h-10 flex-1 rounded-lg" />
20        <Skeleton className="h-10 flex-1 rounded-lg" />
21      </div>
22    </div>
23  );
24}
25

شبکه کارت محصول (Product Cards Grid)

شبیه‌سازی بارگذاری لیست محصولات.

مشاهده کد

1import { Skeleton } from "@/components/ui/skeleton";
2
3export default function ProductCardsExample() {
4  return (
5    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
6      {[...Array(3)].map((_, i) => (
7        <div key={i} className="space-y-3">
8          <Skeleton className="h-[200px] w-full rounded-lg" />
9          <Skeleton className="h-4 w-3/4" />
10          <Skeleton className="h-4 w-1/2" />
11          <Skeleton className="h-8 w-20" />
12        </div>
13      ))}
14    </div>
15  );
16}
17

بخش نظرات (Comment Section)

شبیه‌سازی بارگذاری نظرات کاربران.

مشاهده کد

1import { Skeleton } from "@/components/ui/skeleton";
2
3export default function CommentSectionExample() {
4  return (
5    <div className="max-w-2xl space-y-6">
6      {[...Array(3)].map((_, i) => (
7        <div key={i} className="flex space-x-4 space-x-reverse">
8          <Skeleton className="h-10 w-10 rounded-full flex-shrink-0" />
9          <div className="flex-1 space-y-2">
10            <div className="flex items-center space-x-2 space-x-reverse">
11              <Skeleton className="h-4 w-24" />
12              <Skeleton className="h-3 w-16" />
13            </div>
14            <Skeleton className="h-4 w-full" />
15            <Skeleton className="h-4 w-5/6" />
16          </div>
17        </div>
18      ))}
19    </div>
20  );
21}
22

ویجت‌های داشبورد (Dashboard Widgets)

شبیه‌سازی بارگذاری ویجت‌های آماری.

مشاهده کد

1import { Skeleton } from "@/components/ui/skeleton";
2
3export default function DashboardExample() {
4  return (
5    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
6      {[...Array(4)].map((_, i) => (
7        <div
8          key={i}
9          className="p-4 rounded-lg border border-border space-y-3"
10        >
11          <Skeleton className="h-4 w-20" />
12          <Skeleton className="h-8 w-24" />
13          <Skeleton className="h-3 w-32" />
14        </div>
15      ))}
16    </div>
17  );
18}
19

بارگذاری جدول (Table Loading)

شبیه‌سازی بارگذاری داده‌های جدول.

مشاهده کد

1import { Skeleton } from "@/components/ui/skeleton";
2
3export default function TableExample() {
4  return (
5    <div className="space-y-3">
6      <div className="grid grid-cols-4 gap-4">
7        <Skeleton className="h-8 w-full" />
8        <Skeleton className="h-8 w-full" />
9        <Skeleton className="h-8 w-full" />
10        <Skeleton className="h-8 w-full" />
11      </div>
12      {[...Array(5)].map((_, i) => (
13        <div key={i} className="grid grid-cols-4 gap-4">
14          <Skeleton className="h-10 w-full" />
15          <Skeleton className="h-10 w-full" />
16          <Skeleton className="h-10 w-full" />
17          <Skeleton className="h-10 w-full" />
18        </div>
19      ))}
20    </div>
21  );
22}
23

مرجع API (API Reference)

Skeleton

پراپ‌های کامپوننت Skeleton.

پراپ (Prop)	نوع (Type)	پیش‌فرض (Default)	توضیحات (Description)
`className`	`string`	`undefined`	کلاس‌های CSS سفارشی (برای تعیین اندازه و شکل)

بهترین شیوه‌ها (Best Practices)

کی از Skeleton استفاده کنیم؟

از Skeleton زمانی استفاده کنید که محتوا در حال بارگذاری است و می‌خواهید به کاربر نشان دهید که چیزی در حال اتفاق افتادن است. این باعث بهبود تجربه کاربری می‌شود

تطابق با محتوای واقعی

سعی کنید اندازه و شکل Skeleton با محتوای واقعی که بارگذاری می‌شود مطابقت داشته باشد. این باعث کاهش جابجایی محتوا (layout shift) می‌شود

تعداد مناسب

تعداد Skeleton ها را متناسب با تعداد آیتم‌هایی که معمولاً نمایش داده می‌شود تنظیم کنید. برای لیست‌ها، 3-5 آیتم کافی است

انیمیشن

انیمیشن pulse به صورت پیش‌فرض فعال است. این انیمیشن باعث می‌شود کاربر متوجه شود که محتوا در حال بارگذاری است

دسترسی‌پذیری

در صورت نیاز، می‌توانید aria-busy="true" و aria-label را به کانتینر اضافه کنید