Skeleton

Ne zaman kullanılır

Skeleton, içeriğin biçimi bilinirken yüklenmesi bir saniyeyi aşabilecek alanlar içindir: kart listeleri, profil özetleri, tablo satırları.

Ne zaman kullanılmaz

• Biçim bilinmiyorsa: Spinner kullanın.
• Bir işlem sonucu beklenirken: Button loading kullanın.
• Bir saniyeden kısa beklemelerde: Yer tutucu göstermeyin; içerik gelince gösterin.

Anatomi

Kart yükleniyor

AçıkKoyu

Kodu kopyala

import { Skeleton } from '@bigbang/ui';

export default function Card() {
  return (
    <div role="status" aria-busy="true" className="flex w-80 items-start gap-md">
      <Skeleton shape="circle" decorative />
      <div className="flex flex-1 flex-col gap-sm">
        <Skeleton width="60%" decorative />
        <Skeleton lines={2} decorative />
      </div>
      <span className="sr-only">Kart yükleniyor</span>
    </div>
  );
}

1. Daire: Avatar yeri; circle.
2. Satırlar: Başlık ve metin yeri; text, birden çok satırda sonuncusu %60.
3. Vurgu: Soldan sağa geçen açık şerit.

Davranış

• Vurgu period-shimmer (1500 ms) süresiyle üç kez geçer, sonra durur.
• Azaltılmış harekette vurgu hiç geçmez; yer tutucu durağan kalır.
• loading={false} içerik gelince yer tutucuyu kaldırır; içerik motion.reveal ile belirir.
• Metin satırları çevredeki body-md yazı boyutunu izler.

Yönergeler

• Yer tutucuyu gerçek içeriğin yerleşimine benzetin; yükleme bitince sayfa kaymasın.
• Bir öğe için tek durum rolü kullanın; parçaları decorative yapın.
• Bir sayfada en fazla bir bölgeyi yer tutucu olarak gösterin; diğerlerini içerik geldikçe doldurun.

İçerik

• label neyin yüklendiğini söyler: “Kart yükleniyor”.
• Varsayılan metin kütüphane metnidir.

Türkçe	İngilizce
İçerik yükleniyor	Loading content
Kart yükleniyor	Loading card

İlgili bileşenler

• Spinner: Biçimi bilinmeyen bekleme.
• Button: İşlem süren düğme.