يعد تحميل واجهات المستخدم والعناصر المرئية مكونات مهمة في تطبيقات الويب والهاتف المحمول؛ إنهم يلعبون دورًا محوريًا في تعزيز تجربة المستخدم والمشاركة. وبدون هذه الإشارات، قد يصبح المستخدمون في حيرة وغير متأكدين بشأن ما إذا كان التطبيق يعمل بشكل صحيح، أو إذا قاموا بتشغيل الإجراءات الصحيحة، أو ما إذا كانت إجراءاتهم قيد المعالجة.

من خلال تزويد المستخدمين بإشارات مرئية متنوعة تشير إلى المعالجة المستمرة، يمكنك التخفيف بشكل فعال أي شكل من أشكال عدم اليقين والإحباط - مما يمنعهم في النهاية من الخروج من التطبيق قبل الأوان.

تأثير تحميل واجهات المستخدم على الأداء وتجربة المستخدم

تؤكد الاستدلالات العشرة التي قدمها جاكوب نيلسن لتصميم واجهة المستخدم على أهمية التأكد من أن حالة النظام الحالية مرئية للمستخدمين النهائيين. يسلط هذا المبدأ الضوء على الحاجة إلى مكونات واجهة المستخدم مثل تحميل واجهات المستخدم وواجهة مستخدم التعليقات الأخرى عناصر لتزويد المستخدمين بالتعليقات المناسبة على الفور، حول العمليات الجارية، وضمن المطلوب إطار زمني.

يلعب تحميل واجهات المستخدم دورًا محوريًا في تشكيل الأداء العام وتجربة المستخدم للتطبيقات. من منظور الأداء، يمكن أن يؤدي تنفيذ شاشات التحميل الفعالة إلى تحسين سرعة تطبيق الويب واستجابته بشكل كبير.

من الناحية المثالية، يسمح الاستخدام الفعال لواجهات المستخدم للتحميل بتحميل المحتوى غير المتزامن - وهذا يمنع الصفحة بأكملها من التجميد أثناء تحميل مكونات محددة في الخلفية؛ بشكل أساسي، مما يؤدي إلى إنشاء تجربة تصفح أكثر سلاسة.

علاوة على ذلك، من خلال تقديم إشارة مرئية واضحة للعمليات الجارية، من المرجح أن ينتظر المستخدمون بصبر استرجاع المحتوى.

البدء باستخدام 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> }

سيتم عرض التشويق تحميل المكون حتى محتوى كل شيء انتهى المكون من التحميل وأصبح جاهزًا للعرض. إليك بناء جملة Suspense لتحقيق ذلك:

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

 </Suspense>
 </>
 );}

Next.js 13 يدعم رد الفعل التشويق

أضاف Next.js 13 دعمًا لـ Suspense من خلال ميزة دليل التطبيق الخاص به. بشكل أساسي، العمل مع دليل التطبيق يسمح لك بتضمين وتنظيم ملفات الصفحات لمسار معين داخل مجلد مخصص.

ضمن دليل المسار هذا، يمكنك تضمين ملف تحميل.js الملف، الذي سيستخدمه Next.js بعد ذلك كمكون احتياطي لعرض واجهة مستخدم التحميل قبل عرض المكون الفرعي مع بياناته.

الآن، دعونا ندمج React Suspense في Next.js 13 من خلال إنشاء تطبيق تجريبي للمهام.

يمكنك العثور على رمز هذا المشروع في ملف جيثب مخزن.

قم بإنشاء مشروع Next.js 13

سوف تقوم بإنشاء تطبيق بسيط يقوم بجلب قائمة المهام من ملف واجهة برمجة تطبيقات 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. ثم يقوم بعد ذلك بتعيين مجموعة من المهام التي تم جلبها لعرض قائمة المهام على صفحة المتصفح.

بالإضافة إلى ذلك، يتضمن التعليمات البرمجية غير متزامن انتظر وظيفة تحاكي التأخير، مما يؤدي إلى إنشاء سيناريو يسمح للمستخدم برؤية واجهة مستخدم التحميل لمدة محددة قبل عرض المهام التي تم جلبها.

في حالة استخدام أكثر واقعية؛ بدلاً من محاكاة التأخير، حالات مثل معالجة الأنشطة داخل التطبيقات، وجلب البيانات من قواعد البيانات، استهلاك واجهات برمجة التطبيقات، أو حتى أوقات الاستجابة البطيئة لواجهة برمجة التطبيقات (API) قد تتسبب في بعض التأخيرات القصيرة.

دمج React Suspense في تطبيق Next.js

افتح ال التطبيق/layout.js قم بملف وتحديث التعليمات البرمجية النمطية 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>
 )
}

ال التطبيق/layout.js يعمل الملف الموجود في Next.js 13 كمكون تخطيط مركزي يحدد البنية العامة وسلوك تخطيط التطبيق. في هذه الحالة، تمرير أطفال دعم ل تشويق المكون، يضمن أن يصبح التخطيط غلافًا لمحتوى التطبيق بأكمله.

ال تشويق سيعرض المكون تحميل المكون كبديل بينما تقوم المكونات الفرعية بتحميل محتواها بشكل غير متزامن؛ للإشارة إلى المستخدم أنه يتم جلب المحتوى أو معالجته في الخلفية.

قم بتحديث ملف الطريق الرئيسي

افتح ال التطبيق/page.js الملف، واحذف الكود المعياري Next.js، وأضف الكود أدناه.

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

وأخيرا، المضي قدما، وإنشاء تحميل.js الملف داخل التطبيق / تودوس الدليل. داخل هذا الملف، أضف الكود أدناه.

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

إضافة المغازل الحديثة إلى تحميل مكون واجهة المستخدم

يعد مكون تحميل واجهة المستخدم الذي قمت بإنشائه أساسيًا للغاية؛ يمكنك اختياريًا إضافة شاشات هيكلية. وبدلاً من ذلك، يمكنك إنشاء مكونات تحميل مخصصة وتصميمها باستخدام Tailwind CSS في تطبيق Next.js الخاص بك. ثم قم بإضافة رسوم متحركة تحميل سهلة الاستخدام مثل المغازل التي توفرها حزم مثل رد فعل المغازل.

لاستخدام هذه الحزمة، تابع وتثبيتها في مشروعك.

npm install react-loader-spinner --save

بعد ذلك، قم بتحديث جهازك تحميل.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.

تحسين تجربة المستخدم من خلال تحميل واجهات المستخدم

يمكن أن يؤدي دمج واجهات المستخدم للتحميل في تطبيقات الويب الخاصة بك إلى تحسين تجربة المستخدم بشكل كبير. من خلال تزويد المستخدمين بإشارات مرئية أثناء العمليات غير المتزامنة، يمكنك تقليل مخاوفهم وأي شكوك بشكل فعال، وبالتالي زيادة مشاركتهم إلى أقصى حد.