Memuat UI dan elemen visual merupakan komponen penting dalam aplikasi web dan seluler; mereka memainkan peran penting dalam meningkatkan pengalaman dan keterlibatan pengguna. Tanpa isyarat seperti itu, pengguna mungkin menjadi bingung dan tidak yakin apakah aplikasi berfungsi dengan baik, apakah mereka memicu tindakan yang benar, atau apakah tindakan mereka sedang diproses.

Dengan memberikan berbagai isyarat visual kepada pengguna yang menunjukkan pemrosesan yang sedang berlangsung, Anda dapat melakukan mitigasi secara efektif segala bentuk ketidakpastian dan frustrasi—yang pada akhirnya menghalangi mereka untuk keluar dari aplikasi sebelum waktunya.

Dampak Memuat UI pada Kinerja dan Pengalaman Pengguna

Sepuluh heuristik Jakob Nielsen untuk desain antarmuka pengguna menekankan pentingnya memastikan status sistem saat ini terlihat oleh pengguna akhir. Prinsip ini menyoroti kebutuhan akan komponen antarmuka pengguna seperti UI pemuatan dan UI umpan balik lainnya elemen untuk segera memberikan umpan balik yang sesuai kepada pengguna, tentang proses yang sedang berlangsung, dan sesuai kebutuhan jangka waktu.

Memuat UI memainkan peran penting dalam membentuk keseluruhan kinerja dan pengalaman pengguna aplikasi. Dari perspektif kinerja, penerapan layar pemuatan yang efektif dapat meningkatkan kecepatan dan daya tanggap aplikasi web secara signifikan.

Idealnya, pemanfaatan UI pemuatan secara efektif memungkinkan pemuatan konten yang tidak sinkron—hal ini mencegah seluruh halaman terhenti saat komponen tertentu dimuat di latar belakang; pada dasarnya, menciptakan pengalaman menjelajah yang lebih lancar.

Selain itu, dengan menawarkan indikasi visual yang jelas tentang proses yang sedang berlangsung, pengguna akan lebih sabar menunggu pengambilan konten.

Memulai React Suspense di Next.js 13

Ketegangan adalah komponen React yang mengelola operasi asinkron yang berjalan di latar belakang, seperti pengambilan data. Sederhananya, komponen ini memungkinkan Anda merender komponen cadangan hingga komponen turunan yang dimaksud dipasang dan memuat data yang diperlukan.

Berikut adalah contoh cara kerja Suspense. Anggaplah Anda memiliki komponen yang mengambil data dari API.

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

Ketegangan akan menampilkan Memuat komponen sampai isi Semua komponen selesai dimuat dan siap untuk dirender. Berikut sintaks Suspense untuk mencapai hal ini:

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

 </Suspense>
 </>
 );}

Next.js 13 Mendukung React Suspense

Next.js 13 menambahkan dukungan untuk Suspense melalui fitur direktori aplikasinya. Intinya, bekerja dengan direktori aplikasi memungkinkan Anda memasukkan dan mengatur file halaman untuk rute tertentu dalam folder khusus.

Dalam direktori rute ini, Anda dapat memasukkan a memuat.js file, yang kemudian akan digunakan Next.js sebagai komponen cadangan untuk menampilkan UI pemuatan sebelum merender komponen anak dengan datanya.

Sekarang, mari kita integrasikan React Suspense di Next.js 13 dengan membuat demo aplikasi To-Do.

Anda dapat menemukan kode proyek ini di dalamnya GitHub gudang.

Buat Proyek Next.js 13

Anda akan membangun aplikasi sederhana yang mengambil daftar tugas dari API DummyJSON titik akhir. Untuk memulai, jalankan perintah di bawah ini untuk menginstal Next.js 13.

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

Tentukan Rute Todos

Di dalam src/aplikasi direktori, buat folder baru, dan beri nama Semua. Di dalam folder ini, tambahkan yang baru halaman.js file, dan sertakan kode di bawah ini.

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;

Fungsi asinkron, Semua, mengambil daftar tugas dari DummyJSON API. Kemudian dipetakan melalui array tugas yang diambil untuk merender daftar tugas di halaman browser.

Selain itu, kode tersebut menyertakan asinkron Tunggu fungsi yang menyimulasikan penundaan, membuat skenario yang memungkinkan pengguna melihat UI pemuatan selama durasi tertentu sebelum menampilkan tugas yang diambil.

Dalam kasus penggunaan yang lebih realistis; alih-alih mensimulasikan penundaan, situasi seperti aktivitas pemrosesan dalam aplikasi, mengambil data dari database, mengkonsumsi API, atau bahkan, waktu respons API yang lambat akan menyebabkan penundaan singkat.

Integrasikan React Suspense di Aplikasi Next.js

Buka aplikasi/tata letak.js file dan perbarui kode boilerplate Next.js dengan kode berikut.

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>
 )
}

Itu aplikasi/tata letak.js File di Next.js 13 berfungsi sebagai komponen tata letak pusat yang mendefinisikan keseluruhan struktur dan perilaku tata letak aplikasi. Dalam hal ini, melewati anak-anak menopang ke Ketegangan komponen, memastikan tata letak menjadi pembungkus seluruh konten aplikasi.

Itu Ketegangan komponen akan menampilkan Memuat komponen sebagai cadangan saat komponen anak memuat kontennya secara asinkron; menunjukkan kepada pengguna bahwa konten sedang diambil atau diproses di latar belakang.

Perbarui File Rute Rumah

Buka aplikasi/halaman.js file, hapus kode boilerplate Next.js, dan tambahkan kode di bawah ini.

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;

Buat File pemuatan.js

Terakhir, lanjutkan dan buat a memuat.js file di dalam aplikasi/Todos direktori. Di dalam file ini, tambahkan kode di bawah ini.

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

Menambahkan Spinner Modern ke Komponen UI Pemuatan

Komponen UI pemuatan yang Anda buat sangat mendasar; Anda secara opsional dapat memilih untuk menambahkan layar kerangka. Alternatifnya, Anda dapat membuat dan menata gaya komponen pemuatan khusus menggunakan Tailwind CSS di aplikasi Next.js Anda. Kemudian, tambahkan animasi pemuatan yang mudah digunakan seperti spinner yang disediakan oleh paket seperti Bereaksi Pemintal.

Untuk menggunakan paket ini, lanjutkan dan instal di proyek Anda.

npm install react-loader-spinner --save

Selanjutnya, perbarui memuat.js mengajukan sebagai berikut:

"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;

Sekarang, UI pemuatan akan menampilkan pesan pemuatan dan merender animasi pemintal garis berputar untuk menunjukkan pemrosesan yang sedang berlangsung saat mengambil data Todos.

Tingkatkan Pengalaman Pengguna Dengan Memuat UI

Memasukkan UI pemuatan ke dalam aplikasi web Anda dapat meningkatkan pengalaman pengguna secara signifikan. Dengan memberikan petunjuk visual kepada pengguna selama operasi asinkron, Anda dapat meminimalkan kekhawatiran dan ketidakpastian mereka secara efektif, sehingga memaksimalkan interaksi mereka.