نحوه اضافه کردن Skeleton Screen در Next.js

آیا می‌خواهید از مکث‌های ناخوشایند و بازخوانی محتوای مزاحم جلوگیری کنید؟ یک صفحه نمایش اسکلت می تواند همان چیزی باشد که شما به دنبال آن هستید.

اگر از یک برنامه وب یا موبایل استفاده کرده اید، احتمالاً صفحه نمایش اسکلت را دیده اید. این دستگاه رابط کاربری زمانی که به‌روزرسانی به دریافت داده‌ها بستگی دارد، تجربه روان‌تری ارائه می‌کند، که ممکن است مدتی طول بکشد.

دقیقاً بدانید که صفحه اسکلت چیست، چرا ممکن است بخواهید از آنها در برنامه خود استفاده کنید و چگونه آنها را در Next.js پیاده سازی کنید.

صفحه نمایش اسکلت چیست؟

صفحه اسکلت یک عنصر رابط کاربری است که نشان می دهد چیزی در حال بارگیری است. این معمولاً یک حالت خالی یا “خالی” از یک مؤلفه UI، بدون هیچ داده ای است. برای مثال، اگر می‌خواهید فهرستی از آیتم‌ها را از یک پایگاه داده بارگیری کنید، صفحه اسکلت ممکن است یک لیست ساده بدون داده باشد، فقط عناصر جعبه مکان‌دار باشد.

بسیاری از وب‌سایت‌ها و برنامه‌ها از صفحه نمایش‌های اسکلتی استفاده می‌کنند. برخی از آنها برای وضعیت بارگذاری استفاده می کنند، در حالی که برخی دیگر از آنها به عنوان راهی برای بهبود عملکرد درک شده استفاده می کنند.

چرا از صفحه نمایش اسکلت استفاده کنیم؟

چند دلیل وجود دارد که ممکن است بخواهید از یک صفحه نمایش در برنامه Next.js خود استفاده کنید.

اول، می تواند عملکرد درک شده برنامه شما را بهبود بخشد. اگر کاربران هنگام بارگیری داده ها صفحه خالی ببینند، ممکن است تصور کنند که برنامه کند است یا به درستی کار نمی کند. با این حال، اگر آنها یک صفحه اسکلت را ببینند، می دانند که داده ها در حال بارگیری هستند و برنامه همانطور که انتظار می رود کار می کند.

دوم، صفحه‌های اسکلت می‌توانند به کاهش «جنگ» یا پارگی در رابط کاربری شما کمک کنند. اگر داده‌ها به‌صورت ناهمزمان بارگیری می‌شوند، با دریافت داده‌ها، رابط کاربری می‌تواند به‌تدریج به‌روزرسانی شود. این می تواند تجربه کاربری روان تری را ایجاد کند.

سوم، اگر داده ها از یک اتصال آهسته یا غیرقابل اعتماد بارگیری می شوند، صفحات اسکلت می توانند تجربه کاربری بهتری را ارائه دهند. اگر داده ها از یک سرور راه دور واکشی می شوند، این احتمال وجود دارد که اتصال کند یا قطع شود. در این موارد، نشان دادن یک صفحه اسکلت می تواند مفید باشد تا کاربران بدانند که داده ها در حال بارگذاری هستند، حتی اگر مدتی طول بکشد.

نحوه پیاده سازی Skeleton Screen در Next.js

چند راه برای پیاده سازی صفحات اسکلت در Next.js وجود دارد. شما می توانید از ویژگی های داخلی برای بازسازی دستی یک صفحه اسکلت ساده استفاده کنید. یا می توانید از کتابخانه ای مانند react-loading-skeleton یا Material UI برای انجام این کار برای شما استفاده کنید.

روش 1: استفاده از ویژگی های داخلی

در Next.js می‌توانید از قلاب‌های React مختلف و شرایط ساده برای نمایش صفحه‌های اسکلت استفاده کنید. می‌توانید از && prop برای نمایش مشروط صفحه‌های اسکلت استفاده کنید.

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;

کد بالا از قلاب useState برای پیگیری بارگیری داده ها (isLoading) استفاده می کند. از قلاب useEffect برای شبیه سازی بارگذاری داده ها به صورت ناهمزمان استفاده می کند. در نهایت، از عملگر && برای نمایش مشروط صفحه اسکلت یا محتوای جزء استفاده می کند.

این روش ایده آل نیست، زیرا نیاز به تنظیم دستی حالت isLoading و شبیه سازی بارگذاری داده دارد. با این حال، این یک راه ساده برای پیاده سازی یک صفحه اسکلت در Next.js است.

روش 2: استفاده از کتابخانه ای مانند “React-Loading-Skeleton”

راه دیگر برای پیاده سازی صفحات اسکلت استفاده از کتابخانه ای مانند react-loading-skeleton است. react-loading-skeleton یک کامپوننت React است که می توانید از آن برای ایجاد صفحه های اسکلت استفاده کنید. دارای یک جزء است که می توانید آن را در اطراف هر عنصر UI بپیچید.

برای استفاده از react-loading-skeleton، باید آن را با استفاده از npm نصب کنید.

npm i react-loading-skeleton

پس از نصب، می توانید آن را به برنامه Next.js خود وارد کنید و از آن به صورت زیر استفاده کنید:

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;

کد بالا مولفه Skeleton را از کتابخانه react-loading-skeleton وارد می کند. سپس از آن برای ایجاد دو صفحه اسکلت استفاده می کند. از پایه ارتفاع برای تنظیم ارتفاع صفحه اسکلت استفاده می کند. اکنون می‌توانید از رندر شرطی برای رندر مؤلفه تنها زمانی که داده‌ها موجود است استفاده کنید.

روش 3: استفاده از Material UI

اگر از Material UI در برنامه Next.js خود استفاده می کنید، می توانید از مؤلفه از کتابخانه @mui/material استفاده کنید. مؤلفه از Material UI دارای چند پایه است که می توانید برای سفارشی کردن صفحه اسکلت از آنها استفاده کنید.

برای استفاده از کامپوننت از Material UI، ابتدا باید آن را با استفاده از npm نصب کنید:

npm install @mui/material

پس از نصب، می توانید آن را به برنامه Next.js خود وارد کنید و از آن به صورت زیر استفاده کنید:

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;

کد بالا مولفه Skeleton را از کتابخانه @material-ui/lab وارد می کند. سپس دو صفحه اسکلت ایجاد می کند. نوع پایه، نوع صفحه اسکلت را تعیین می کند. پایه های عرض و ارتفاع، ابعاد صفحه اسکلت را مشخص می کنند.

همچنین می توانید انیمیشن های مختلفی را به صفحه های اسکلت خود اضافه کنید. Material UI دارای چند انیمیشن داخلی است که می توانید از آنها استفاده کنید. به عنوان مثال، می‌توانید از animate prop برای اضافه کردن یک انیمیشن محو شده به صفحه‌های اسکلت خود استفاده کنید:

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;

با افزودن پایه متحرک به یک جزء ، می توانید حرکت بصری را در رابط کاربری خود بگنجانید. مقدار موج یک انیمیشن موج دار به صفحه اسکلت اضافه می کند. اکنون می توانید از رندر شرطی برای نمایش محتوا بعد از صفحه اسکلت استفاده کنید.

بهبود تجربه کاربر با صفحه نمایش اسکلت

صفحه‌های اسکلت می‌توانند راهی عالی برای بهبود تجربه کاربری برنامه Next.js شما باشند. آنها می توانند سرعت درک شده را افزایش دهند، jank را کاهش دهند، و تجربه بهتری را هنگامی که داده ها در یک اتصال آهسته یا ناپایدار حرکت می کنند، ارائه دهند.

هر روشی را که برای افزودن صفحه‌های اسکلت انتخاب می‌کنید، روشی عالی برای بهبود تجربه کاربری برنامه Next.js شما هستند.

منبع مقاله