اسکلتون (Skeleton)

نمایش‌دهنده لودینگ به شکل placeholder

معرفی

کامپوننت Skeleton برای نمایش وضعیت لودینگ استفاده می‌شود.

چه زمانی استفاده کنیم:

برای نمایش placeholder محتوا هنگام بارگذاری اولیه صفحه
وقتی layout محتوا از قبل مشخص است و می‌خواهید layout shift را حذف کنید
برای عملیات‌هایی که بیش از ۲۰۰ms طول می‌کشند

چه زمانی استفاده نکنیم:

برای عملیات‌های کوتاه‌تر از ۲۰۰ms — نمایش skeleton و حذف آن ناگهانی به نظر می‌رسد
برای حالت‌های خطا — از ErrorState استفاده کنید
برای نمودارها — از prop isLoading در کامپوننت نمودار استفاده کنید

استفاده

import { Skeleton } from '@parto-system-design/ui'

export default function MyComponent() {
  return (
    <div className="flex flex-col gap-3">
      <Skeleton className="h-12 w-12 rounded-full" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-[250px]" />
        <Skeleton className="h-4 w-[200px]" />
      </div>
    </div>
  )
}

اشکال مختلف

از prop shape برای تعیین شکل اسکلتون استفاده کنید:

<Skeleton shape="rect" className="h-12 w-full" />
<Skeleton shape="circle" size="lg" />
<Skeleton shape="line" />
<Skeleton shape="text" />

تکرار

از prop count برای نمایش چند اسکلتون پشت سر هم استفاده کنید:

<Skeleton shape="line" count={3} />

پریست‌های آماده

سه پریست آماده برای استفاده سریع:

import { MetricCardSkeleton, ChartSkeleton, TableSkeleton } from '@parto-system-design/ui';

<MetricCardSkeleton />
<ChartSkeleton />
<TableSkeleton rows={5} />

Props

Skeleton

Prop

Type

MetricCardSkeleton

اسکلتون آماده برای MetricCard. بدون props اضافی.

ChartSkeleton

اسکلتون آماده برای نمودارها. بدون props اضافی.

TableSkeleton