İndirme ve Bekleme Durumları

1) Neden beklemeyi yönetelim

• (1) eylemin başladığı şey, (2) ne kadar alacağı ve (3) bir şeyler ters giderse ne yapılacağı.
• İyi önyükleme durumu kaygıyı azaltır, odaklanmayı korur ve zaman kazandırır.

2) Desen seçimi: iskelet, ilerleme, spinner, akış

İskelet - gelecekteki içeriğin yapısı bilindiğinde, ancak veri olmadığında. CLS'yi önler.
İlerleme çubuğu (deterministik) - hacim veya aşamalar bilindiğinde (örneğin, apload, KYC).
Belirsiz ilerleme - süre bilinmediğinde, ancak süreç gerçek olduğunda (başlatma).
Spinner - sadece 600-800 ms'ye kadar kısa bir gösterge olarak; Ayrıca - iskelet/ilerleme/metin.
Akış/kısmi oluşturma - verileri parçalar halinde (SSR/segmentler) veriyoruz ve bitmiş bölgeleri hemen gösteriyoruz.

Kural: Kullanıcıyı boş bir alanda bırakmayın. 1 s'den fazla ise - yapı ve anlam verin.

3) Zaman eşikleri ve bütçeler (kıyaslamalar)

≤ 100 ms - anında görsel yanıt: düğme/alan üzerinde 'meşgul'.
≤ 1000 ms - iskelet/gösterge + metin "Yük"....

4) Anlık yanıtın mikro kalıpları

Kontrolü hemen 'meşgul'ye aktarıyoruz (animasyon ≤ 100 ms), tekrarlanan tıklamaları engelliyoruz.
Düğmenin metnini "Gönder"... olarak değiştirin, "İstek kabul edildi" tostunu gösterin (isteğe bağlı).
Odak alana geri döndüğünde, yerel iskelet sonuç bölgesindedir.

5) "Sıçramalar" olmadan iskelet

Gelecekteki içeriğin 1:1 biçimini çizin: blok yükseklikleri, medya oranları ('En boy oranı').
Animasyon parıltısı: 1200-1600 ms, parlaklık genliği ≤ %20, flaş yok.
Büyük listelerde - sanallaştırma + DOM'daki iskelet sayısını sınırlama.

css
.skeleton{position:relative; background:var(--bg-elevated); border-radius:12px; overflow:hidden}
.skeleton::after{
content:"";position:absolute; inset:0;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
animation:shimmer 1. 4s infinite;
}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

6) İlerleme ve kilometre taşları