Components · Skeleton
Skeleton
Spinner'dan farklı: yüklenen içeriğin iskeletini gösterir, böylece kullanıcı henüz veri gelmeden ekran düzenini anlar (CLS=0). 800ms+ beklemeler için kullan; daha kısasında flash etkisi yapar. Detay seviyesi kullanılan layout'a bire bir oturmalı; rastgele "kutu" çizilmez.
02 · Card list iskeleti
Sipariş kartının gerçek layout'una bire bir denk geliyor
03 · Tablo iskeleti
Header gerçek (zaten render olmuş), satırlar skeleton
Sipariş
Müşteri
Şube
Durum
Tutar
Kurallar
· Skeleton ne zaman? 800ms - 4sn arası beklemelerde. 800ms altı: hiç gösterme; üstü 4sn: progress bar + mesaj göster (kullanıcı kayıp hisseder).
· Layout-faithful: skeleton, gerçek içeriğin yerini tutar; aynı pozisyon, aynı boy, aynı düzen. Generic "kart skeleton" yapma.
· Renkler: base --nb-color-border, shine --nb-color-bg-muted. Gradient hareketi 1.4sn linear loop.
· prefers-reduced-motion: reduce → animasyon durur, opacity .3 sabit kalır.
· CLS=0: skeleton gerçek içerikle aynı boyda olmalı; render anında zıplayan bir blok skeleton'un anlamını öldürür.
· Liste skeleton'u 3-5 satır gösterir; daha fazla "yüklenme uzun" hissi yaratır.
· Erişilebilirlik: skeleton container aria-busy="true"; veri gelince false'a çevir + role="status" ile "Yüklendi" duyur.
· Yasak: tek bir blob skeleton (içeriği temsil etmez), animasyonsuz statik gri kutu (loading mu yoksa placeholder mı belli olmaz).