Kullanıcı arayüzlerinin ve görsel öğelerin yüklenmesi, web ve mobil uygulamalarda önemli bileşenlerdir; Kullanıcı deneyimini ve katılımını artırmada önemli bir rol oynarlar. Bu tür ipuçları olmadan kullanıcılar, uygulamanın düzgün çalışıp çalışmadığı, doğru eylemleri tetikleyip tetiklemediği veya eylemlerinin işlenip işlenmediği konusunda şaşkınlığa uğrayabilir ve kararsız kalabilir.

Kullanıcılara devam eden işlemeyi gösteren çeşitli görsel ipuçları sağlayarak, bu süreci etkili bir şekilde azaltabilirsiniz. her türlü belirsizlik ve hayal kırıklığı, sonuçta onları uygulamadan erken çıkmaktan caydırır.

Kullanıcı Arayüzlerini Yüklemenin Performans ve Kullanıcı Deneyimi Üzerindeki Etkisi

Jakob Nielsen'in kullanıcı arayüzü tasarımına yönelik on buluşsal yöntemi, mevcut sistem durumunun son kullanıcılar tarafından görülebilmesini sağlamanın önemini vurguluyor. Bu prensip, yükleme kullanıcı arayüzleri ve diğer geri bildirim kullanıcı arayüzleri gibi kullanıcı arayüzü bileşenlerine olan ihtiyacı vurgulamaktadır. Kullanıcılara devam eden süreçler hakkında ve gereken süre içerisinde derhal uygun geri bildirim sağlayacak unsurlar zaman aralığı.

Kullanıcı arayüzlerinin yüklenmesi, uygulamaların genel performansını ve kullanıcı deneyimini şekillendirmede çok önemli bir rol oynar. Performans açısından bakıldığında, etkili yükleme ekranlarının uygulanması, bir web uygulamasının hızını ve yanıt verebilirliğini önemli ölçüde artırabilir.

İdeal durumda, yükleme kullanıcı arayüzlerini etkili bir şekilde kullanmak, eşzamansız içerik yüklemeye olanak tanır; bu, belirli bileşenler arka planda yüklenirken tüm sayfanın donmasını önler; esasen, daha sorunsuz bir tarama deneyimi yaratmak.

Ayrıca, devam eden süreçlerin net bir görsel göstergesinin sunulmasıyla kullanıcıların içerik alımını sabırla bekleme olasılıkları artar.

Next.js 13'te React Suspense'a Başlarken

Gerilim veri getirme gibi arka planda çalışan eşzamansız işlemleri yöneten bir React bileşenidir. Basitçe söylemek gerekirse, bu bileşen, amaçlanan alt bileşen gerekli verileri takıp yükleyene kadar bir geri dönüş bileşeni oluşturmanıza olanak tanır.

İşte Suspense'in nasıl çalıştığına dair bir örnek. Bir API'den veri getiren bir bileşeniniz olduğunu varsayalım.

exportdefaultfunctionTodos() {
const data = fetchData() {
//fetch data...
return data;
 };
return<h1> {data.title} h1>
}
// the fallback component
exportdefaultfunctionLoading() {
return<p>Loading data ...p> }

Suspense şunları gösterecek: Yükleniyor içeriğine kadar bileşen Yapılacaklar bileşen yüklemeyi tamamlar ve görüntülenmeye hazırdır. İşte bunu başarmak için Suspense sözdizimi:

import { Suspense } from'react';
functionApp() {
return (
 <>
}>

 </Suspense>
 </>
 );}

Next.js 13 React Suspense'ı Destekliyor

Next.js 13, uygulama dizini özelliği aracılığıyla Suspense desteğini ekledi. Esasen, uygulama dizini ile çalışma belirli bir rota için sayfa dosyalarını özel bir klasöre eklemenizi ve düzenlemenizi sağlar.

Bu rota dizinine bir yükleme.js Next.js, alt bileşeni verileriyle birlikte oluşturmadan önce yükleme kullanıcı arayüzünü görüntülemek için geri dönüş bileşeni olarak bu dosyayı kullanacaktır.

Şimdi bir demo To-Do uygulaması oluşturarak React Suspense'i Next.js 13'e entegre edelim.

Bu projenin kodunu kendi içinde bulabilirsiniz. GitHub depo.

Next.js 13 Projesi Oluşturun

Yapılacak işlerin listesini alan basit bir uygulama oluşturacaksınız. KuklaJSON API'si uç nokta. Başlamak için Next.js 13'ü yüklemek üzere aşağıdaki komutu çalıştırın.

npx create-next-app@latest next-project --experimental-app

Bir Todos Rotası Tanımlayın

İçinde kaynak/uygulama dizini açın, yeni bir klasör oluşturun ve ona bir ad verin Yapılacaklar. Bu klasörün içine yeni bir tane ekleyin page.js dosyanızı oluşturun ve aşağıdaki kodu ekleyin.

asyncfunctionTodos() {
asyncfunctionfetchTodos() {
let res = await fetch("https://dummyjson.com/todos");
const todosData = await res.json();
return todosData
 }
const {todos} = await fetchTodos();
asyncfunctionwait(ms) {
returnnewPromise(resolve => setTimeout(resolve, ms));
 }
await wait(3000); 
return (
 <> 

"todo-container">
"todo-list">
 {todos.slice(0, 10).map((todo) => (


"todos">

<h2>{todo.todo}h2> </li>
 </div>
 </ul>
 ))}
 </div>
 </div>
 </>
 );




}
exportdefault Todos;

Asenkron fonksiyon, Yapılacaklar, DummyJSON API'sinden yapılacaklar listesini getirir. Daha sonra, tarayıcı sayfasında bir yapılacaklar listesi oluşturmak için getirilen yapılacaklar dizisini eşler.

Ek olarak, kod eşzamansız bir özellik içerir Beklemek Bir gecikmeyi simüle eden ve kullanıcının, getirilen yapılacak işleri görüntülemeden önce belirli bir süre boyunca yükleme kullanıcı arayüzünü görmesine olanak tanıyan bir senaryo oluşturan işlev.

Daha gerçekçi bir kullanım senaryosunda; gecikme simülasyonu yerine uygulamalar içindeki faaliyetlerin işlenmesi, veritabanlarından veri getirilmesi gibi durumlar, API'leri tüketmekhatta yavaş API yanıt süreleri bazı kısa gecikmelere neden olabilir.

React Suspense'ı Next.js Uygulamasına Entegre Edin

Aç app/layout.js dosyalayın ve ortak metin Next.js kodunu aşağıdaki kodla güncelleyin.

import React, { Suspense } from'react';
import Loading from'@/app/Todos/loading';
exportconst metadata = {
 title: 'Create Next App',
 description: 'Generated by create next app',
}
exportdefaultfunctionRootLayout({ children }) {
return (
"en">

}>
 {children}
 </Suspense>
 </body>
 </html>
 )
}

app/layout.js Next.js 13'teki dosya, uygulamanın düzeninin genel yapısını ve davranışını tanımlayan merkezi bir düzen bileşeni olarak hizmet eder. Bu durumda geçiş çocuklar desteklemek Gerilim bileşen, düzenin tüm uygulama içeriği için bir sarmalayıcı haline gelmesini sağlar.

Gerilim bileşen şunu gösterecektir: Yükleniyor alt bileşenler içeriklerini eşzamansız olarak yüklerken geri dönüş olarak bileşen; kullanıcıya içeriğin arka planda getirildiğini veya işlendiğini belirtir.

Ev Rotası Dosyasını Güncelleyin

Aç app/page.js dosyasını açın, ortak metin Next.js kodunu silin ve aşağıdaki kodu ekleyin.

import React from'react';
import Link from"next/link";
functionHome () {
return (



Next.js 13 React Suspense Loading Example</h1>
"/Todos">Get Todos</Link>
 </div>
 </main>
 )
}
exportdefault Home;

Loading.js Dosyasını oluşturun

Son olarak devam edin ve bir yükleme.js içindeki dosya uygulama/Yapılacaklar dizin. Bu dosyanın içine aşağıdaki kodu ekleyin.

exportdefaultfunctionLoading() {
return<p>Loading data ...p> }

Yükleme Kullanıcı Arayüzü Bileşenine Modern Döndürücüler Ekleme

Oluşturduğunuz yükleme kullanıcı arayüzü bileşeni çok basittir; isteğe bağlı olarak iskelet ekranlar eklemeyi seçebilirsiniz. Alternatif olarak, özel yükleme bileşenleri oluşturabilir ve biçimlendirebilirsiniz Next.js uygulamanızda Tailwind CSS'yi kullanma. Ardından, gibi paketlerin sağladığı döndürücüler gibi kullanıcı dostu yükleme animasyonlarını ekleyin. Reaksiyon İplikçileri.

Bu paketi kullanmak için devam edin ve projenize yükleyin.

npm install react-loader-spinner --save

Ardından, bilgilerinizi güncelleyin yükleme.js aşağıdaki gibi dosya:

"use client"
import { RotatingLines} from'react-loader-spinner'
functionLoading() {
return (



Loading the Todos ...</p> 
 strokeColor="grey"
 strokeWidth="5"
 animationDuration="0.75"
 width="96"
 visible={true}
 />
 </div>
 );
}
exportdefault Loading;

Artık yükleme arayüzünde bir yükleme mesajı görüntülenecek ve Todos verileri alınırken devam eden işlemi belirtmek için dönen bir çizgi döndürücü animasyonu oluşturulacak.

Kullanıcı Arayüzlerini Yükleyerek Kullanıcı Deneyimini İyileştirin

Yükleme kullanıcı arayüzlerini web uygulamalarınıza dahil etmek, kullanıcı deneyimini önemli ölçüde geliştirebilir. Asenkron işlemler sırasında kullanıcılara görsel ipuçları sağlayarak endişelerini ve belirsizliklerini etkili bir şekilde en aza indirebilir ve dolayısıyla katılımlarını en üst düzeye çıkarabilirsiniz.