טעינת ממשק משתמש ואלמנטים חזותיים הם מרכיבים חשובים ביישומי אינטרנט וניידים; הם ממלאים תפקיד מרכזי בשיפור חווית המשתמש והמעורבות. ללא רמזים כאלה, המשתמשים עלולים להיות מבולבלים ולא בטוחים אם האפליקציה פועלת כראוי, אם הם הפעילו את הפעולות הנכונות, או אם הפעולות שלהם מעובדות.

על ידי מתן רמזים ויזואליים שונים למשתמשים המעידים על עיבוד מתמשך, אתה יכול להפחית ביעילות כל צורה של אי ודאות ותסכול - בסופו של דבר מרתיע אותם מלצאת בטרם עת מהאפליקציה.

השפעת ממשק משתמשי טעינת על ביצועים וחווית משתמש

עשר ההיוריסטיקות של יעקב נילסן לעיצוב ממשק משתמש מדגישות את החשיבות של הבטחת מצב המערכת הנוכחי גלוי למשתמשי הקצה. עיקרון זה מדגיש את הצורך ברכיבי ממשק משתמש כגון טעינת ממשקי משתמש וממשק משתמש משוב אחר אלמנטים כדי לספק למשתמשים משוב מתאים, על תהליכים מתמשכים, ובמסגרת הנדרשת מסגרת זמן.

ממשקי המשתמש לטעינה ממלאים תפקיד מרכזי בעיצוב הביצועים הכוללים וחווית המשתמש של יישומים. מנקודת מבט של ביצועים, הטמעת מסכי טעינה יעילים יכולה לשפר משמעותית את המהירות וההיענות של יישום אינטרנט.

באופן אידיאלי, ניצול יעיל של ממשקי משתמשי טעינה מאפשר טעינת תוכן אסינכרוני - זה מונע מהעמוד כולו להקפיא בזמן שרכיבים ספציפיים נטענים ברקע; בעצם, יצירת חווית גלישה חלקה יותר.

יתר על כן, על ידי מתן אינדיקציה חזותית ברורה לתהליכים מתמשכים, סביר יותר שהמשתמשים יחכו בסבלנות לאחזור תוכן.

תחילת העבודה עם React Suspense ב-Next.js 13

מֶתַח הוא רכיב React המנהל פעולות א-סינכרוניות הפועלות ברקע, כגון שליפת נתונים. במילים פשוטות, רכיב זה מאפשר לך לעבד רכיב חלופי עד שהרכיב הצאצא המיועד נטען וטוען את הנתונים הנדרשים.

הנה דוגמה לאופן שבו מתח עובד. נניח שיש לך רכיב שמביא נתונים מ-API.

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

מתח יציג את טוען רכיב עד התוכן של לעשות הרכיב מסיים את הטעינה ומוכן לעיבוד. להלן תחביר המתח להשגת זה:

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

 </Suspense>
 </>
 );}

Next.js 13 תומך ב-React Suspense

Next.js 13 הוסיף תמיכה ב-Suspense באמצעות תכונת ספריית האפליקציות שלו. בעיקרו של דבר, עבודה עם ספריית האפליקציה מאפשר לך לכלול ולארגן קבצי דפים עבור מסלול מסוים בתוך תיקיה ייעודית.

בתוך ספריית המסלולים הזו, אתה יכול לכלול א loading.js קובץ, שבו Next.js ישתמש לאחר מכן כרכיב ה-fallback כדי להציג את ממשק המשתמש הטעינה לפני עיבוד הרכיב הצאצא עם הנתונים שלו.

כעת, בואו נשלב את React Suspense ב-Next.js 13 על ידי בניית אפליקציית To-Do הדגמה.

אתה יכול למצוא את הקוד של הפרויקט הזה בו GitHub מאגר.

צור פרויקט Next.js 13

אתה תבנה אפליקציה פשוטה שמביאה רשימה של מטלות מה- ממשק API של DummyJSON נקודת קצה. כדי להתחיל, הפעל את הפקודה למטה כדי להתקין את Next.js 13.

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

הגדר מסלול Todos

בתוך ה src/app ספרייה, צור תיקיה חדשה ושמה לה לעשות. בתוך תיקיה זו, הוסף חדש page.js קובץ, וכלול את הקוד למטה.

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;

הפונקציה האסינכרונית, לעשות, מביא רשימה של פעולות מ-DummyJSON API. לאחר מכן, הוא ממפה את מערך ה-todos שנלקחו כדי להציג רשימה של מטלות בדף הדפדפן.

בנוסף, הקוד כולל אסינכרוני לַחֲכוֹת פונקציה המדמה עיכוב, יוצרת תרחיש שיאפשר למשתמש לראות ממשק משתמש טעינה למשך זמן מסוים לפני הצגת המטלות שהובאו.

במקרה שימוש מציאותי יותר; במקום לדמות עיכוב, מצבים כמו עיבוד פעילויות בתוך יישומים, שליפת נתונים מבסיסי נתונים, צורכים את ה-APIs, או אפילו זמני תגובה איטיים של API יגרמו לעיכובים קצרים.

שלב את React Suspense באפליקציית Next.js

פתח את ה app/layout.js קובץ ועדכן את קוד ה-boilerplate Next.js בקוד הבא.

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 משמש כרכיב פריסה מרכזי המגדיר את המבנה וההתנהגות הכוללים של פריסת האפליקציה. במקרה זה, עובר את יְלָדִים תמיכה ל מֶתַח רכיב, מבטיח שהפריסה תהפוך למעטפת לתוכן היישום כולו.

ה מֶתַח הרכיב יציג את טוען רכיב כ-fallback בזמן שרכיבי הצאצא טוענים את התוכן שלהם באופן אסינכרוני; מציין למשתמש שתוכן מועבר או מעובד ברקע.

עדכן את קובץ מסלול הבית

פתח את ה app/page.js קובץ, מחק את קוד Next.js של boilerplate, והוסף את הקוד למטה.

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

לבסוף, קדימה, וצור א loading.js קובץ בתוך אפליקציה/Todos מַדרִיך. בתוך הקובץ הזה, הוסף את הקוד למטה.

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

הוספת ספינרים מודרניים לרכיב ממשק המשתמש לטעינה

רכיב הטעינה של ממשק המשתמש שיצרת הוא בסיסי מאוד; אתה יכול לבחור להוסיף מסכי שלד. לחלופין, ניתן ליצור ולעצב רכיבי טעינה מותאמים אישית באמצעות Tailwind CSS ביישום Next.js שלך. לאחר מכן, הוסף אנימציות טעינה ידידותיות למשתמש כמו ספינרים המסופקים על ידי חבילות כגון מגיבים ספינרים.

כדי להשתמש בחבילה זו, קדימה להתקין אותה בפרויקט שלך.

npm install react-loader-spinner --save

לאחר מכן, עדכן את שלך loading.js קובץ באופן הבא:

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

כעת, ממשק המשתמש של הטעינה יציג הודעת טעינה ויציג הנפשה מסתובבת של קווים מסתובבים כדי לציין עיבוד מתמשך בזמן שליפת נתוני Todos.

שפר את חווית המשתמש באמצעות טעינת ממשקי משתמש

שילוב ממשקי משתמש טעינה ביישומי האינטרנט שלך יכול לשפר משמעותית את חווית המשתמש. על ידי מתן רמזים חזותיים למשתמשים במהלך פעולות אסינכרוניות, אתה יכול למזער את הדאגות שלהם ואת כל אי הוודאות שלהם, וכתוצאה מכך למקסם את המעורבות שלהם.