‏بهترین وضعیت لودینگ، نبودنشه

قبل از دوران SPAها، وقتی کاربر روی لینک کلیک می‌کرد مرورگر منتظر جواب سرور می‌موند و بعد صفحه‌ی کامل رو نشون می‌داد. یعنی لودینگ سطح اپلیکیشن مدیریت می‌شد، نه سطح کامپوننت. با اومدن SPAها ناوبری فوری شد ولی داده دیرتر می‌رسه، برای همین همه‌جا اسکلتون و اسپینر و shimmer گذاشتیم. نویسنده می‌گه ما فقط انتظار رو جابه‌جا کردیم، نه اینکه حذفش کنیم.

راه‌حل پیشنهادیش route transition هست. منظور انیمیشن نیست؛ یعنی روتر ناوبری رو شروع کنه، داده رو پشت‌صحنه لود کنه و تا وقتی همه‌چیِ لازم برای صفحه‌ی بعدی آماده نشده، تغییر مسیر رو commit نکنه. اون‌وقت کاربر مستقیم به یه صفحه‌ی کامل می‌ره، نه صفحه‌ای که داره خودشو پر می‌کنه.

کلید این کار preload کردنه. هاور کردن روی یه لینک یا وارد شدن لینک به viewport، هردو فرصت خوبین که داده رو زودتر از کلیک کاربر بگیریم. تو TanStack Router، route loaderها جای طبیعی تعریف نیاز داده‌ی هر مسیرن، پس روتر از قبل می‌دونه هر صفحه چه داده‌ای لازم داره و می‌تونه زودتر شروع به گرفتنش کنه.

نکته‌ی قشنگ ماجرا اینه که UI خالی رو به‌جای باگ، فیدبک ببینی. اگه بعد از ناوبری بخشی از صفحه دیر بیاد، یعنی اون داده درست preload نشده. به‌همین خاطر کوئری‌ها به‌جای نگه‌داشتن وضعیت لودینگ، اگه داده نباشه فقط null برمی‌گردونن تا مشکل توی توسعه داد بزنه:

const user = useQuery(userQueryOptions(userId));

if (!user.data) return null;

return <UserProfile user={user.data} />;

برای وقتایی که داده واقعاً دیر می‌رسه، یه اندیکیتر لودینگ سراسری (مثل نوار بالای GitHub) کافیه؛ یه جای ثابت که کاربر معنیش رو یاد می‌گیره، به‌جای ده‌تا تجربه‌ی لودینگ متفاوت برای جدول و سایدبار و چارت. حتی می‌شه نشون‌دادنش رو کمی عقب انداخت تا اگه انتقال سریع تموم شد، اصلاً دیده نشه.

مشکل رفرش صفحه هم جداست، چون از صفر شروع می‌شه و هاور و preloadی در کار نیست. نویسنده اینجا یه overlay تمام‌صفحه می‌ذاره تا اپ جا بیفته. قدم آخر هم نگه‌داشتن داده روی خود دستگاه (مثل TanStack DB یا Zero) هست که باعث می‌شه رفرش‌های بعدی هم فوری حس بشن.

نکات کلیدی:

• لودینگ رو از سطح کامپوننت ببر سطح اپلیکیشن
• داده رو موقع هاور یا دیده‌شدن لینک preload کن تا ناوبری به صفحه‌ی کامل برسه
• UI خالی رو سیگنال preload نشدن بدون، نه چیزی که با اسکلتون قایمش کنی
• یه اندیکیتر لودینگ سراسری به‌جای ده‌ها لودینگ پراکنده بذار
• با نگه‌داشتن داده روی دستگاه، رفرش رو هم سریع کن