React Skeleton Nedir ve Nasıl Kullanılır?

Published in

Kodcular

5 min readMar 28, 2023

React Skeleton Nedir?

React Skeleton fikri, Single Page Application (SPA) uygulamalarının popüler hale geldiği zamanlarda ortaya çıkmıştır. Bu uygulamalar, geleneksel web sayfalarından farklı olarak, bir kez yüklendikten sonra sayfa yenilemeleri olmadan içeriklerin değiştirilmesine olanak sağlar. Ancak bu uygulamaların yüklenmesi uzun sürebilir ve kullanıcılar için iyi bir deneyim olmaktan çıkar. Bu sayede sayfadan ayrılmasına sebep olabilir. Tabi tahammül seviyesine bağlı olarak bu süre değişebilir😊

İşte bu arada ortaya React Skeleton tekniği çıkıyor. Bu teknik, uygulamanın ana bileşenlerinin hızlıca yüklenmesine izin verir ve kullanıcının boş bir sayfa beklemesi yerine, bir yükleme göstergesi ve uygulamanın taslağını görüntüler. Bu sayede uygulamanın yükleme süresini azaltarak kullanıcılara daha hızlı ve verimli bir kullanım imkanı sağlar.

React Skeleton Neden Kullanılmalıdır?

Öncelikle React Skeleton tekniğini, kullanıcılara daha iyi bir deneyim sunmak için kullanılmalıdır. Buna birkaç neden sıralayarak daha iyi kavrayabiliriz.

Hız
Kullanıcı Deneyimi
Mobil Uyumlu
SEO Dostu

Hızlı yükleme süresi, kullanıcı deneyimi, mobil uyumluluk ve SEO dostu özellikleri ile React uygulamalarında kullanılan React Skeleton, performans açısından da oldukça hızlı sonuçlar vermektedir. Bakalım bu teknik nasıl kullanılıyor…

React Skeleton Nasıl Kullanılır?

React Skeleton tekniğini kullanmak için öncelikle bir React uygulamanız olması gerekir. React projenize başladığınızı varsayarak React Skeleton’u nasıl ekleyeceğimizden bahsetmeye başlayacağım. Eğer bir React projeniz yoksa “React Nedir Ve Bir React Projesine Nasıl Başlarız?” başlıklı içeriğimden faydalanabilirsiniz.

React Skeletonu install etmekle başlayalım. Terminali açarak aşağıdaki komutu girelim ve “react-loading-skeleton”u kuralım.

npm install react-loading-skeleton

React Skeleton, bir bileşen şeklinde kullanılır. Bunun için öncelikle bir React componenti oluşturmamız gerekiyor. “react-loading-skeleton”u componentimize import ettikten sonra uygulamamız yüklenirken hangi katmanların yükleneceğini belirleyebilirsiniz. Şimdi bunları bir örnekle inceleyelim.

import React from "react";

function MyComponent() {
    const title = "Title";
    const paragraph = "This is a paragraph.";
    const button = <button className="button">Submit</button>;
  
    return (
      <div className="container">
        <h2 className="title">{title}</h2>
        <p className="paragraph">{paragraph}</p>
        {button}
      </div>
    );
  }
  
  export default MyComponent;

Sade React componentimiz bu şekildeyken Skeleton’lu componentimiz ise aşağıdaki gibidir.

import Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";
import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [loading, setLoading] = useState(true);
  const [title, setTitle] = useState("");
  const [paragraph, setParagraph] = useState("");
  const [button, setButton] = useState(<button className="button">Submit</button>);

  useEffect(() => {
    setTimeout(() => {
      setTitle("MEDIUM");
      setParagraph("This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.");
      setLoading(false);
    }, 1000);
  }, []);

  return (
    <div className="container">
      <h2 className="title">{loading ? <Skeleton baseColor="#d3cce3" width={200} height={20}/> : title}</h2>
      <p className="paragraph">{loading ? <Skeleton baseColor="#d3cce3" width={400} count={3}/> : paragraph}</p>
      {loading ? <Skeleton baseColor="#d3cce3" width={90} height={40}/> : button}
    </div>
  );
}
export default MyComponent;

Aman gözümüz korkamasın bu işlemleri bir defa yaptığımızda elimizde gözümüzde alışıyor ve kolaylıkla React Skeletonu kullanabiliyoruz.

loading adında bir boolean değişken, uygulamanın mevcut yükleme durumunu tutar. Eğer loading true ise, uygulama yükleniyor demektir ve Skeleton bileşeni, paragraph yerine geçici bir yükleme animasyonu oluşturmak için kullanılır. Belirtilen count sayısı kadar satırımız oluştur ve her bir satır için belirtilen width ve baseColor ayarlarına sahip bir yükleme animasyonu sayfamıza yansır. Eğer loading false ise, paragraph gösterilir ve yükleme animasyonu sona erer.

Bileşen monte edildiğinde, useEffect hook’u otomatik olarak çağrılır ve 1000 milisaniye (1 saniye) sonra setTitle, setParagraph ve setLoading fonksiyonlarını kullanarak componentimizin durumunu günceller. setTitle ve setParagraph fonksiyonları, başlık ve paragraf için belirli bir değer atar ve setLoading fonksiyonu yüklenme durumunu false olarak ayarlar, böylece yükleme animasyonu sona erer ve gerçek içerik gösterilir.

React Skeleton tekniğini kullanırken unutmamız gerekenler:

“react-loading-skeleton/dist/skeleton.css” in import edilmesi, eğer import etmeyi unutursak React Skeleton çalışmaz ve bir süre önce benim yaptığım gibi yana döne hata arar durursunuz aman söylim🙃
Bu componentin çalışması ve diğer bileşenleriyle beraber kullanmak için elbette App.js’i unutmamak gerekir. Bu sayede oluşturduğumuz bileşeni diğer bileşenlerle birlikte kullanarak, uygulamamızın yükleme süresini azaltabiliriz.

import './App.css';
import MyComponent from './components/Example/MyComponent';

function App() {
  return (
    <>
    <MyComponent/>
    </>
  );
}
export default App;  {/*App.js*/}

React Skeleton da Variant Nedir ve Kaç Çeşit Variant Vardır?

Evet eğlenceli bir prop ile devam ediyoruz. Skeleton bileşeninin variant propu, bileşeninin nasıl görüntüleneceğini belirler. Bu prop, dört farklı değer alabilir:

"text": Metin blokları için kullanılır.
"circle": Yuvarlak şekilli resimler için kullanılır.
"rectangular": Dikdörtgen şekilli resimler için kullanılır.
"rounded": Yuvarlak kenarlı dikdörtgen şekilli resimler için kullanılır.

Bir metin bloğu yerine yuvarlak bir resim bloğu veya dikdörtgen şekilli bir resim bloğu gibi farklı bir görünüm için variant propunu kullanabiliriz. Hemen örneklerle inceleyelim.

 return (
    <div className="container">
      <h2 className="title">{loading ? <Skeleton baseColor="#d3cce3" variant="rectangular" width={100} height={40} style={{borderRadius: "0"}} /> : title}</h2>
      <p className="paragraph">{loading ? <Skeleton baseColor="#d3cce3" variant="text" width={200} height={20}  count={3}/> : paragraph}</p>
      <p className="paragraph">{loading ? <Skeleton baseColor="#d3cce3" variant="rounded" width={210} height={60}/> : paragraph}</p>
      {loading ? <Skeleton baseColor="#d3cce3"variant="circle" width={50} height={50} style={{ borderRadius: '50%' }}/> : button}
    </div>
  );
}

Variant propunu çok güzel bir örnekle görselleştirdik. Tabi variant propunu kullanırken de küçük çaplı dikkat etmemiz gereken şeyler oluyor yoksa malesef çalışmıyor. Örneğin "circle" variantı "borderRadius" kullanmazsak çevresi yuvarlak bir şekilde çizilen bir dikdörtgeni temsil eder. Bu yüzden mutlaka style olarak "borderRadius" değeri verilmeli.