الگوهای بارگذاری

import { Skeleton } from '@partodata/ui'

// Skeleton ساده
<Skeleton className="h-4 w-48" />

// جایگزین کارت
<div className="bg-surface-100 p-4 rounded-lg border border-default space-y-3">
  <div className="flex items-center gap-3">
    <Skeleton className="h-10 w-10 rounded-full" />
    <div className="space-y-2">
      <Skeleton className="h-4 w-32" />
      <Skeleton className="h-3 w-24" />
    </div>
  </div>
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-3/4" />
</div>

function InfluencerListSkeleton() {
  return (
    <div className="space-y-3">
      {Array.from({ length: 5 }).map((_, i) => (
        <div key={i} className="flex items-center gap-3 p-4 border border-default rounded-lg">
          <Skeleton className="h-12 w-12 rounded-full" />
          <div className="flex-1 space-y-2">
            <Skeleton className="h-4 w-1/3" />
            <Skeleton className="h-3 w-1/4" />
          </div>
          <Skeleton className="h-8 w-20" />
        </div>
      ))}
    </div>
  )
}

// استفاده
{isLoading ? <InfluencerListSkeleton /> : <InfluencerList data={data} />}

function MetricCardSkeleton() {
  return (
    <div className="bg-surface-100 p-4 rounded-lg border border-default space-y-2">
      <Skeleton className="h-3 w-24" />
      <Skeleton className="h-8 w-32" />
      <Skeleton className="h-3 w-16" />
    </div>
  )
}

import { Button, Spinner } from '@partodata/ui'

<Button disabled={isSubmitting}>
  {isSubmitting && <Spinner className="ms-2 h-4 w-4" />}
  {isSubmitting ? 'در حال ذخیره...' : 'ذخیره'}
</Button>

const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } = useInfiniteQuery(...)

return (
  <div>
    {/* داده‌های بارگذاری شده */}
    {data?.pages.map(page =>
      page.items.map(item => <InfluencerCard key={item.id} data={item} />)
    )}

    {/* بارگذاری آیتم‌های جدید */}
    {isFetchingNextPage && (
      <div className="space-y-3 mt-3">
        {Array.from({ length: 3 }).map((_, i) => (
          <InfluencerCardSkeleton key={i} />
        ))}
      </div>
    )}

    {/* دکمه بارگذاری بیشتر */}
    {hasNextPage && !isFetchingNextPage && (
      <Button variant="outline" className="w-full mt-4" onClick={fetchNextPage}>
        بارگذاری بیشتر
      </Button>
    )}
  </div>
)

// اطلاع‌رسانی به screen reader
<div aria-busy={isLoading} aria-label="در حال بارگذاری...">
  {isLoading ? (
    <InfluencerListSkeleton />
  ) : (
    <InfluencerList data={data} />
  )}
</div>

// یا با aria-live
<div aria-live="polite">
  {isLoading && <span className="sr-only">در حال بارگذاری داده‌ها...</span>}
</div>

// ❌ غلط — در تم تیره (پیش‌فرض پرتو) مستطیل روشن می‌درخشد
<div className="bg-gray-200 animate-pulse rounded-md h-4 w-48" />

// ✅ درست — bg-foreground/10 در هر دو تم کار می‌کند + ARIA داخلی دارد
<Skeleton className="h-4 w-48" />

// ❌ غلط — margin فیزیکی در RTL در سمت اشتباه می‌نشیند
<Button disabled={isSubmitting}>
  {isSubmitting && <Spinner className="mr-2" />}
  ذخیره کمپین
</Button>

// ✅ درست — gap-2 داخلی Button فاصله را در هر دو جهت مدیریت می‌کند
<Button disabled={isSubmitting}>
  {isSubmitting && <Spinner />}
  {isSubmitting ? 'در حال ذخیره...' : 'ذخیره کمپین'}
</Button>

import { keepPreviousData, useQuery } from '@tanstack/react-query'
import { DataTable } from '@partodata/ui'

const { data, isPending, isFetching } = useQuery({
  queryKey: ['influencers', page, sort],
  queryFn: () => fetchInfluencers({ page, sort }),
  placeholderData: keepPreviousData, // داده صفحه قبل تا رسیدن صفحه جدید می‌ماند
})

<DataTable
  columns={columns}
  data={data?.items ?? []}
  isLoading={isPending} // Skeleton فقط برای بارگذاری اولیه
  loadingRows={5}
  // هنگام fetch صفحه بعد، جدول قبلی با کمی شفافیت دیده می‌شود
  className={isFetching && !isPending ? 'opacity-60 transition-opacity' : undefined}
/>

// ❌ غلط — ۱۵ اعلان جداگانه برای screen reader
{Array.from({ length: 15 }).map((_, i) => (
  <Skeleton key={i} shape="line" />
))}

// ✅ درست — یک اعلان، با prop count
<Skeleton shape="line" count={15} />

// ✅ درست — چیدمان سفارشی: یک role="status" برای کل فهرست
<div role="status" aria-busy="true" aria-label="در حال بارگذاری فهرست اینفلوئنسرها" className="space-y-3">
  {Array.from({ length: 5 }).map((_, i) => (
    <div key={i} className="flex items-center gap-3 p-4 border border-default rounded-lg">
      <Skeleton shape="circle" size="md" aria-hidden="true" />
      <div className="flex-1 space-y-2">
        <Skeleton shape="line" className="w-1/3" aria-hidden="true" />
        <Skeleton shape="line" className="h-3 w-1/4" aria-hidden="true" />
      </div>
    </div>
  ))}
</div>

// ❌ غلط — کلیک دوم عملیات را دوبار ثبت می‌کند + متن غیررسمی
<Button onClick={submitCampaign}>
  {isSubmitting && <Spinner />}
  {isSubmitting ? 'داره ذخیره می‌شه...' : 'ذخیره'}
</Button>

// ✅ درست — disabled جلوی ارسال تکراری را می‌گیرد و متن رسمی است
<Button disabled={isSubmitting} onClick={submitCampaign}>
  {isSubmitting && <Spinner />}
  {isSubmitting ? 'در حال ذخیره...' : 'ذخیره'}
</Button>