آموزش صفر تا صد ساخت Skeleton Loader با CSS

پیش نیاز ها

• آشنایی با HTML
• آشنایی با CSS در سطح دیزاین کارت

اسکلت بارگذاری کننده (Skeleton Loader) چیست ؟

ماهیت کلی یک اسکلت، پس‌زمینه (Background) متحرک است، که به نظر می‌آید تصویر در حال لود شدن است ولی درواقع این پس‌زمینه آن عکس یا ویدیو است که پس از لود شدن، عکس جایگزین آن می‌شود یا روی آن را می‌پوشاند. این تکنیک در طراحی سایت به کار می‌رود تا تجربه کاربری بهتری ارائه شود.

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

این به کاربر این تصور را می دهد که وب سایت سریعتر است زیرا آنها از قبل می دانند که چه نوع محتوایی قبل از ظاهر شدن بارگذاری می شود. این به عنوان عملکرد درک شده شناخته می شود .

چه زمانی از Skeleton Loading استفاده کنید

• زمانی که بارگیری داده ها بیش از 3 ثانیه طول می کشد، استفاده کنید.
• در وب سایت هایی با ترافیک زیاد استفاده کنید.
• زمانی که بیش از یک عنصر همزمان در حال بارگیری هستند، به کاربر اطلاع دهید که چیزی در حال بارگیری است.
• برای یک پس‌زمینه یا فرآیند طولانی‌مدت استفاده کنید.

Skeleton Loading در داده های استاتیک

در مثال ساده پایین مشاهده میکنید که به تگ حامل عکس کلاس skeleton-loader رو دادیم که از انیمیشن های css برای ایجاد یک بک‌گراند برانگیخته و واکنشی استفاده می‌کند. و تا هنگامی که عکس در صفحه لود نشده باشد ما آن را مشاهده میکنیم.

<div class="skeleton-loader min-h-180">
    <img src="heavy-image.png" alt="image" />
</div>

.skeleton-loader {
    background-color: #e2e5e7;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(90deg, 
          rgba(255, 255, 255, 0), 
          rgba(255, 255, 255, 0.5), 
          rgba(255, 255, 255, 0)
    );
    background-size: 40px 100%;
    background-repeat: no-repeat;
    background-position: left -40px top 0;
    animation: shine 1s ease infinite;
}
@keyframes shine {
    to {
        background-position: right -40px top 0;
    }
}

.min-h-180 {
    min-height: 180px;
}

CSR : اسکلت بارگذاری در React

ماهیت کلی اسکلت های بارگذاری کننده بک‌گراند های متحرک هستند. اما در فریم‌ورک های فرانت‌اند به دلیل dynamic بودن داده ها ما باید یک لول بالاتر از مرحله قبل عمل کنیم.

کد های صفحه cards

//  pages/cards.jsx
const Cards = () => {
    const [data,setData] = useState([]);
    useEffect(()=> {
      const fetchData = async ()=>{
        const response = await fetch(url);
        setData(await response.json())
      }
      fetchData()
    },[])
    return ( 
      <div className="grid grid-cols-4 gap-2">
      {data.length > 0 ?
          data.map((item,i)=>{
             return (
               <div key={i} className="p-2 w-full">
                  <img className="w-full h-full aspect-square" src={item.imageURL}/>
                  <div className="flex-between">
                      <p>{item.name}</p>
                      <p>{item.rate}</p>
                  </div>
                  <button>مشاهده</button>
               </div>
             )
          })
       :
          <Skeleton count={4}/>
      }
      </div>
    );
}
export default Cards;

کد های کامپوننت Skeleton

// components/skeleton.jsx
const Skeleton = ({ count }) => {
    const renderByCount = ()=> { 
    let skeleton = []; 
    for (let i = 0; i < count; i++) { 
      skeleton.push( 
          <div key={i} className="p-2 w-full"> 
              <div className="skeleton-loader min-h-180"></div> 
              <div className="stflex-between mt-2"> 
                  <div className="skeleton-loader w-70 h-24-px"></div> 
                  <div className="skeleton-loader w-20 h-24-px"></div> 
              </div> 
              <div className="skeleton-loader h-24-px w-50 mt-2"></div> 
          </div> 
          )
    }} 
    return (<>  
        {renderByCount()} 
    </>); 
} 
export default Skeleton;

کد های css

/* کد های اسکلت قسمت بالاست بقیه برای زیباسازی  */
.skeleton-loader {
    background-color: #e2e5e7;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(90deg, 
          rgba(255, 255, 255, 0), 
          rgba(255, 255, 255, 0.5), 
          rgba(255, 255, 255, 0)
    );
    background-size: 40px 100%;
    background-repeat: no-repeat;
    background-position: left -40px top 0;
    animation: shine 1s ease infinite;
}
@keyframes shine {
    to {
        background-position: right -40px top 0;
    }
}
/* اتمام کد های اسکلت */

.w-70 {
    width: 70%;
}
.w-50 {
    width: 50%;
}
.w-full {
    width: 100%;
}
.w-20 {
    width: 20%;
}
.h-24-px {
    height: 24px;
}
.min-h-180 {
    min-height: 180px;
}
.grid {
    display: grid;
}
.grid-cols-4 {
    grid-template-columns: repeat(4,1fr);
}
.gap-2 {
    gap: 8px;
}
.mt-2 {
    margin-top: 8px;
}
.flex-between {
    display: flex;
    justify-content: space-between;
}

توضیحات صفحه cards

مدت زمان انتقال داده ها از سمت سرور به کلاینت کمی طول میکشد. در این کد ما مقدار اولیه‌ی data رو یک لیست خالی قرار دادیم و تا وقتی که داده ها از بکند دریافت شود شرط data.length > 0 مقدار false برمی‌گرداند و کامپوننت Skeleton به کاربر نمایش داده می‌شود.

توضیحات کامپوننت Skeleton

این کامپوننت به تعداد props دریافتی اسکلت می‌سازد. اسکلت ها رو با کلاس های css شبیه به کارت ها طراحی میکنیم تا جای خالی آنها رو پر کنند. سپس بعد از دریافت داده ها دیگر اسکلت ها نمایش داده نمی‌شوند.

نتیجه گیری

شما در این مقاله با مفاهیم پایه ای ساخت اسکلت بارگذاری آشنا شدید. اینک می‌توانید با بهره‌گیری از دانش برنامه‌نویسی خود، این مفاهیم را بسط داده و به طور عملی پیاده‌سازی کنید. با استفاده از این مهارت‌ها، قادر خواهید بود پروژه‌های پیچیده‌تر و کاربردی‌تری را توسعه داده و به دنیای برنامه‌نویسی قدمی محکم‌تر بردارید.

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