Garip duraklamalardan ve dikkat dağıtıcı içerik yenilemelerinden kaçınmaya mı çalışıyorsunuz? Bir İskelet Ekran tam da aradığınız şey olabilir.
Bir web veya mobil uygulama kullandıysanız, muhtemelen bir iskelet ekranı görmüşsünüzdür. Bu UI cihazı, bir güncellemenin alınması biraz zaman alabilecek veri almaya bağlı olduğunda daha sorunsuz bir deneyim sağlar.
İskelet ekranın tam olarak ne olduğunu, bunları uygulamanızda neden kullanmak isteyebileceğinizi ve Next.js’de nasıl uygulanacağını öğrenin.
İskelet Ekranı Nedir?
Bir iskelet ekranı, bir şeyin yüklenmekte olduğunu gösteren bir UI öğesidir. Tipik olarak, herhangi bir veri içermeyen bir UI bileşeninin boş veya “boş” durumudur. Örneğin, bir veritabanından bir öğe listesi yükleyecekseniz, iskelet ekranı veri içermeyen basit bir liste olabilir, yalnızca yer tutucu kutu öğeleri olabilir.
Birçok web sitesi ve uygulama, iskelet ekranlar kullanır. Bazıları bunları yükleme durumu için kullanırken diğerleri algılanan performansı iyileştirmenin bir yolu olarak kullanır.
Neden İskelet Ekranı Kullanılır?
Next.js uygulamanızda bir iskelet ekranı kullanmak istemenizin birkaç nedeni olabilir.
İlk olarak, uygulamanızın algılanan performansını iyileştirebilir. Kullanıcılar veriler yüklenirken boş bir ekran görürse, uygulamanın yavaş olduğunu veya düzgün çalışmadığını varsayabilirler. Ancak bir iskelet ekranı görürlerse verilerin yüklendiğini ve uygulamanın beklendiği gibi çalıştığını bilirler.
İkincisi, iskelet ekranlar, kullanıcı arayüzünüzdeki “boşluğu” veya düzensizliği azaltmaya yardımcı olabilir. Veriler eşzamansız olarak yükleniyorsa, uygulamanız veri alırken kullanıcı arayüzü aşamalı olarak güncellenebilir. Bu, daha sorunsuz bir kullanıcı deneyimi sağlayabilir.
Üçüncüsü, veriler yavaş veya güvenilmez bir bağlantıdan yükleniyorsa, iskelet ekranlar daha iyi bir kullanıcı deneyimi sağlayabilir. Uzak bir sunucudan veri getiriliyorsa, bağlantının yavaşlama veya kesintiye uğrama olasılığı vardır. Bu gibi durumlarda, kullanıcıların verilerin yüklendiğini anlamaları için, biraz zaman alsa bile, bir iskelet ekranı göstermek yardımcı olabilir.
Next.js’de İskelet Ekranı Nasıl Uygulanır?
Next.js’de iskelet ekranları uygulamanın birkaç yolu vardır. Basit bir iskelet ekranını manuel olarak yeniden oluşturmak için yerleşik özellikleri kullanabilirsiniz. Veya işi sizin yerinize yapması için tepki yükleme-iskelet veya Malzeme Kullanıcı Arayüzü gibi bir kitaplık kullanabilirsiniz .
Yöntem 1: Yerleşik Özellikleri Kullanma
Next.js’de, iskelet ekranlarını göstermek için farklı React kancaları ve basit koşullar kullanabilirsiniz. İskelet ekranları koşullu olarak oluşturmak için && desteğini kullanabilirsiniz .
import {useState, useEffect} from ‘react’;
function MyComponent() {
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
setTimeout(() => setIsLoading(false), 1000);
}, []);
return (
<div>
{isLoading && (
<div>
Loading…
</div>
)}
{!isLoading && (
<div>
My component content.
</div>
)}
</div>
);
}
export default MyComponent;
Yukarıdaki kod, verilerin yüklenip yüklenmediğini izlemek için useState kancasını kullanır ( isLoading ). Eşzamansız olarak veri yüklemeyi simüle etmek için useEffect kancasını kullanır . Son olarak, iskelet ekranını veya bileşen içeriğini koşullu olarak oluşturmak için && operatörünü kullanır.
Bu yöntem ideal değildir, çünkü isLoading durumunun manuel olarak ayarlanmasını ve veri yükleme simülasyonunun yapılmasını gerektirir. Ancak, Next.js’de bir iskelet ekranı uygulamanın basit bir yoludur.
Yöntem 2: ‘React-Loading-Skeleton’ Gibi Bir Kitaplık Kullanma
İskelet ekranlarını uygulamanın başka bir yolu da tepki-yükleme-iskelet gibi bir kitaplık kullanmaktır . react-loading-skeleton, iskelet ekranları oluşturmak için kullanabileceğiniz bir React bileşenidir. Herhangi bir UI öğesinin etrafına sarabileceğiniz bir <Skeleton> bileşenine sahiptir.
Tepki yükleme iskeletini kullanmak için npm kullanarak yüklemeniz gerekir .
npm i react-loading-skeleton
Yüklendikten sonra, Next.js uygulamanıza aktarabilir ve şu şekilde kullanabilirsiniz:
import React from ‘react’;
import Skeleton from ‘react-loading-skeleton’;
import ‘react-loading-skeleton/dist/skeleton.css’
const App = () => {
return (
<div>
<Skeleton />
<h3>Second Screen</h3>
<Skeleton height={40} />
</div>
);
};
export default App;
Yukarıdaki kod, Skeleton bileşenini tepki yükleme-iskelet kitaplığından içe aktarır. Daha sonra bunu iki iskelet ekranı oluşturmak için kullanır. İskelet ekranının yüksekliğini ayarlamak için yükseklik desteğini kullanır . Artık bileşeni yalnızca veriler mevcut olduğunda oluşturmak için koşullu oluşturmayı kullanabilirsiniz .
Yöntem 3: Malzeme Kullanıcı Arabirimini Kullanma
Next.js uygulamanızda Material UI kullanıyorsanız, @mui/material kitaplığından <Skeleton> bileşenini kullanabilirsiniz. Material UI’daki <Skeleton> bileşeni, iskelet ekranını özelleştirmek için kullanabileceğiniz birkaç donanıma sahiptir.
<Skeleton> bileşenini Material UI’dan kullanmak için önce onu npm kullanarak yüklemeniz gerekir:
npm install @mui/material
Yüklendikten sonra, Next.js uygulamanıza aktarabilir ve şu şekilde kullanabilirsiniz:
import React from ‘react’;
import Skeleton from ‘@mui/material/Skeleton’;
const App = () => {
return (
<div>
<Skeleton variant=”rect” width={210} height={118} />
<h3>Second Screen</h3>
<Skeleton variant=”text” />
</div>
);
};
export default App;
Yukarıdaki kod, Skeleton bileşenini @material-ui/lab kitaplığından içe aktarır. Daha sonra iki iskelet ekranı oluşturur. Varyant pervane, iskelet ekranının türünü belirler . Genişlik ve yükseklik destekleri , iskelet ekranın boyutlarını tanımlar.
Ayrıca iskelet ekranlarınıza farklı animasyonlar da ekleyebilirsiniz. Material UI, kullanabileceğiniz birkaç yerleşik animasyona sahiptir. Örneğin, iskelet ekranlarınıza bir solma animasyonu eklemek için canlandırma desteğini kullanabilirsiniz:
import React from ‘react’;
import Skeleton from ‘@mui/material/Skeleton’;
const App = () => {
return (
<div>
<Skeleton variant=”rect” width={210} height={118} />
<h3>Second Screen</h3>
<Skeleton variant=”text” animate=”wave” />
</div>
);
};
export default App;
Bir <Skeleton> bileşenine animate desteği ekleyerek, kullanıcı arayüzünüze görsel hareketi dahil edebilirsiniz. Dalga değeri, iskelet ekranına bir sallama animasyonu ekler. Artık içeriği iskelet ekranından sonra göstermek için koşullu oluşturmayı kullanabilirsiniz.
İskelet Ekranlarla Kullanıcı Deneyimini İyileştirin
İskelet ekranları, Next.js uygulamanızın kullanıcı deneyimini iyileştirmenin harika bir yolu olabilir. Algılanan hızı artırabilir, istenmeyen hataları azaltabilir ve veriler yavaş veya kararsız bir bağlantı üzerinden geçtiğinde daha iyi bir deneyim sunabilirler.
İskelet ekranları eklemek için hangi yöntemi seçerseniz seçin, bunlar Next.js uygulamanızın kullanıcı deneyimini iyileştirmenin harika bir yoludur.