تا حالا شده یه سایتی رو باز کنی و ببینی عکس‌ها نصفه‌نیمه میان، متن‌ها یهو جابجا میشن و کلاً سایت تا چند ثانیه شبیه یه اتاق به هم ریخته‌ست؟
اینجاست که یه قهرمان به اسم PreloaderWrapper وارد داستان میشه.

حالا این PreloaderWrapper اصلاً چی هست؟

بذارید با یه مثال ساده بگم: فرض کنید رفتید تئاتر. وقتی روی صندلی می‌شینید، پرده‌ها کشیده شده. پشت پرده، بازیگرها دارن لباس می‌پوشن و دکور داره چیده میشه. وقتی همه چیز ۱۰۰٪ آماده شد، پرده میره کنار و شما یه نمایش بی‌نقص می‌بینید.

توی دنیای فرانت‌اند (مثل ریکت و نکست)، PreloaderWrapper دقیقاً همون پرده‌ی تئاتر یا همون سالن انتظار سایته، یعنی وقتی کاربر سایت رو باز می‌کنه، به جای اینکه محتوای نصفه‌نیمه و در حال لود شدن رو ببینه، اول یه صفحه خوشگلِ لودینگ (مثل یه لوگوی در حال چرخش یا یه انیمیشن جذاب) می‌بینه. وقتی دیتای سایت کامل لود شد و سایت خوش‌تیپ شد، این پرده میره کنار و محتوای اصلی نمایش داده میشه.

چرا باید ازش استفاده کنیم؟

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

توی کد چطوری کار می‌کنه؟ (به زبان خیلی ساده)

ما کل سایتمون رو می‌ذاریم داخل این PreloaderWrapper. بهش میگیم ببین آقای Wrapper، تا وقتی که عکس‌ها و اطلاعاتِ من کامل از سرور نرسیده، همون انیمیشن لودینگت رو به کاربر نشون بده. هر وقت گفتم آماده‌ام، لودینگ رو قایم کن و سایت رو نشون بده یا حتی بعضی وقتا برای اینکه یه زیبایی خاصی بده به سایتمون هنگام بالا اومدن برای کاربر, ما خودمون این رو تنظیم می کنیم که سایت لود بشه نشه ۵ ثانیه مثلا نمایش داده بشه.

ساختارش تو ذهن ما یه چیزی شبیه به اینه:

اگر (سایت هنوز آماده نیست) {
   انیمیشن لودینگ رو نشون بده 
} در غیر این صورت {
   محتوای اصلی سایت رو نشون بده 
}

به همین سادگی, با یه ایده کوچیک، تجربه کاربری (UX) سایتت از زمین تا آسمون فرق می‌کنه.

✦ @programming_codiing