Skip to main content

React ve React Native'de İskelet Ekran (Skeleton Screen) Kullanımı

🎯 Bu Rehberde Ne Öğreneceksiniz?​

Bu rehberde, React ve React Native uygulamalarında İskelet Ekran (Skeleton Screen) desenini adım adım öğreneceksiniz.
Boş bir sayfa veya dönen simge yerine, içeriğin şekline benzeyen animasyonlu geçici yer tutucular kullanarak algılanan performansı artırmayı öğreteceğiz.

Öğrenecekleriniz:

  • Skeleton Screen kavramı ve UX avantajları
  • React için react-content-loader, react-skeletor, react-loading-skeleton çözümleri
  • React Native için react-native-shimmer ve react-native-svg-animated-linear-gradient örnekleri
  • Görsel baskın renkleriyle alternatif placeholder stratejisi
  • ARIA etiketleriyle erişilebilirlik ve SSR entegrasyonu

🧠 İskelet Ekran Nedir?​

Skeleton Screen, içeriğin yavaş yüklenmesini kullanıcıya hissettirmemek için tasarlanmış bir UX desenidir.
Kullanıcıya “bir şeyler oluyor” hissi verirken, gerçek içeriğin yapısını da önceden gösterir.

Spinner yalnızca yüklenmeyi belirtir, skeleton ise neyin yüklendiğini gösterir.

Bu sayede kullanıcı bekleme süresini daha kısa algılar.

⚛️ 1. React Uygulamalarında Skeleton Screen Çözümleri​

React ekosisteminde skeleton ekranlar için güçlü topluluk kütüphaneleri vardır.
Bunlar manuel shimmer animasyonlarına göre daha kolay ve optimize çalışır.

🧩 A. react-content-loader Kullanımı​

SVG tabanlı iskelet ekranlar oluşturmanızı sağlar.
Hazır Facebook, Instagram veya liste şablonları içerir.

import ContentLoader, { Facebook } from 'react-content-loader';

// Hazır Facebook tarzı yükleyici
const FacebookYukleyici = () => <Facebook />;

// Kendi özel SVG iskeletinizi oluşturma
const BenimYukleyicim = () => (
  <ContentLoader>
    <rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
    <rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
    <rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
  </ContentLoader>
);

Bu örnek, profil görseli ve metin alanlarını temsil eden basit bir SVG iskelet ekran oluşturur.

🧠 B. react-skeletor Kullanımı​

Yükleme durumunu kontrol ederek otomatik placeholder üreten HOC yapısı sağlar.


import { createSkeletonProvider, createSkeletonElement } from '@trainline/react-skeletor';

const H1 = createSkeletonElement('h1');
const H2 = createSkeletonElement('h2');

const IsimKarti = ({ ad, soyad }) => (
  <div>
    <H1>{ad}</H1>
    <H2>{soyad}</H2>
  </div>
);

export default createSkeletonProvider(
  { kullanici: { ad: '_____', soyad: '_____' } },
  ({ kullanici }) => kullanici === undefined,
  () => ({ color: 'gray', backgroundColor: 'gray' })
)(IsimKarti);

Veri yüklenene kadar, HTML elemanları otomatik olarak iskelet formuna dönüştürülür.

⚡ C. react-loading-skeleton Kullanımı​

En hızlı ve basit çözüm; doğrudan CSS stillerine göre iskelet oluşturur.


import Skeleton from 'react-loading-skeleton';

const BlogYazisi = ({ baslik, govde }) => (
  <div>
    <h1>{baslik || <Skeleton />}</h1>
    {govde || <Skeleton count={10} />}
  </div>
);

İçerik yoksa otomatik olarak uygun boyutta skeleton render eder.

📱 2. React Native Uygulamalarında Skeleton Çözümleri​

🟣 A. react-native-svg-animated-linear-gradient​

Mobilde shimmer benzeri bir efekt sağlar. SVG tabanlı animasyonlar kullanır.


import SvgAnimatedLinearGradient from 'react-native-svg-animated-linear-gradient';
import { Circle, Rect } from 'react-native-svg';

<SvgAnimatedLinearGradient height={300}>
  <Circle cx="30" cy="30" r="30" />
  <Rect x="75" y="13" rx="4" ry="4" width="100" height="13" />
  <Rect x="75" y="37" rx="4" ry="4" width="50" height="8" />
  <Rect x="0" y="70" rx="5" ry="5" width="400" height="200" />
</SvgAnimatedLinearGradient>;

Bu, Instagram tarzı animasyonlu skeleton kartı oluşturur.

🟡 B. react-native-shimmer​

Facebook’un Shimmer efektinin React Native uyarlamasıdır.


import Shimmer from 'react-native-shimmer';
import { Text } from 'react-native';

<Shimmer>
  <Text>İçerik Yükleniyor...</Text>
</Shimmer>;

Metin veya görselin üzerine parlama animasyonu ekler.

🎨 3. Alternatif Yaklaşımlar: Görselin Baskın Rengini Kullanmak​

Shimmer yerine görselin baskın rengiyle doğal geçiş yaratabilirsiniz. color-thief veya node-vibrant kütüphaneleri, görselin ana tonlarını çıkarır.


// node-vibrant örneği
import Vibrant from 'node-vibrant';

Vibrant.from('gorsel.jpg').getPalette().then(palette => {
  console.log(palette.Vibrant.hex);
});

Bu yaklaşım, kullanıcıya ne tür bir içerik yükleneceğini sezgisel olarak gösterir.

♿ 4. Erişilebilirlik ve Sunucu Tarafı Render (SSR)​

Erişilebilirlik​

Skeleton elemanları, ekran okuyucular için kafa karıştırıcı olabilir. Bu yüzden ARIA etiketleriyle bu alanları gizleyin:


<div aria-disabled={true} aria-label="Yükleniyor"></div>

Böylece yardımcı yazılımlar bu placeholder’ları atlar.

SSR Entegrasyonu​

Server-Side Rendering (SSR) uygulamalarda skeleton ekranlar App Shell içine gömülmelidir. Bu sayede kullanıcı, ilk yüklemede bile boş bir ekran yerine içeriğin “iskeletini” görür.

💬 Sıkça Sorulan Sorular (SSS)​

  1. Spinner mı, Skeleton mı daha iyi?

Skeleton, kullanıcının beklerken içeriğin yapısını görmesini sağlar, bu yüzden daha etkilidir.

  1. Skeleton sayfa yüklenmesini hızlandırır mı?

Hayır, yalnızca bekleme süresinin daha kısa algılanmasını sağlar.

  1. Web ve mobilde aynı tasarım mı kullanılmalı?

Tutarlılık için benzer tasarım önerilir, ama her platformda uygun kütüphane seçilmelidir.

  1. ARIA etiketleri neden önemli?

Erişilebilirliği artırır, screen reader kullanıcıları için kafa karışıklığını önler.

  1. SSR’de nasıl entegre edilir?

App Shell içine statik olarak dahil edilmelidir; hydration sonrası gerçek içerik yüklenir.

🏁 Sonuç​

İskelet ekranlar, modern kullanıcı deneyiminin temel taşlarından biridir. Uygulamanız yüklenirken boş ekran yerine iskelet arayüzler göstermek, hem profesyonel bir görünüm sağlar hem de algılanan performansı artırır.

💡 Rabisu Bulut platformunda yeni React projenizi başlatın, Skeleton Screen tekniğini hemen uygulayın ve kullanıcı deneyimini bir üst seviyeye taşıyın.