بارگذاری صفحه (PageLoader)

معرفی

کامپوننت PageLoader یک نشانگر بارگذاری تمام‌صفحه است که برای نمایش وضعیت لودینگ در سطح صفحه یا بخش‌های بزرگ UI استفاده می‌شود. از کامپوننت Spinner به‌صورت داخلی استفاده می‌کند.

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

• برای بارگذاری بخشی از صفحه — از Skeleton استفاده کنید
• برای بارگذاری داخل modal یا card — از Spinner یا isLoading prop استفاده کنید

استفاده

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

<PageLoader />

مثال‌ها

با پیام

<PageLoader message="در حال بارگذاری اطلاعات..." />

تمام‌صفحه با overlay

برای نمایش لودینگ بر روی کل صفحه با پس‌زمینه تار:

<PageLoader fullScreen message="لطفاً صبر کنید..." />

اندازه‌های مختلف اسپینر

<div className="flex flex-col gap-8">
  <PageLoader spinnerSize="sm" message="اندازه کوچک" />
  <PageLoader spinnerSize="lg" message="اندازه بزرگ" />
  <PageLoader spinnerSize="xl" message="اندازه خیلی بزرگ" />
</div>

Props

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

• دارای role="status" برای اعلام وضعیت به screen reader
• aria-label به‌صورت خودکار از پیام یا متن پیش‌فرض فارسی تنظیم می‌شود

راهنمای استفاده

کامپوننت‌های مرتبط

• Skeleton — برای بارگذاری بخشی از محتوا
• Spinner — برای اعمال کوتاه