شرح

تمام دکمه‌هایی که در فرانت Next.js برای ارسال درخواست به بک‌اند استفاده می‌شوند، باید اصلاح شوند تا پس از اولین کلیک فقط یک بار درخواست ارسال شود. هنگام ارسال درخواست، حالت لودینگ فعال شده و یک لودر کوچک در کنار دکمه نمایش داده شود تا کاربر متوجه وضعیت پردازش شود. در این مدت دکمه غیرفعال باشد تا از کلیک‌های تکراری جلوگیری شود و بار اضافی روی سرور وارد نشود در این بازه زمانی اسکلت پروژه ثابت میماند و دیتاهایی که از سمت بک اند ارسال خواهند شد تغییر خواهد کرد.

وظایف

1. شناسایی تمام دکمه‌هایی که API فراخوانی می‌کنند

   • تمامی صفحات، کامپوننت‌ها، فرم‌ها و مودال‌های Next.js بررسی شوند.

2. اضافه کردن State لودینگ برای هر درخواست

   • استفاده از useState یا useTransition (در صورت نیاز).

   • مثال: const [isLoading, setIsLoading] = useState(false);

3. غیرفعال کردن دکمه در حالت لودینگ

   • دکمه در حالت لودینگ قابل کلیک نباشد.

   • جلوگیری کامل از ارسال درخواست‌های همزمان یا تکراری.

4. نمایش لودر کنار دکمه

   • هنگام لود، یک لودر کوچک در کنار متن دکمه نمایش داده شود (نه جایگزین متن).

   • مکان نمایش لودر باید ثابت و قابل مشاهده باشد.

   • ظاهر لودر با کامپوننت پروژه هماهنگ باشد.

5. هندلینگ کامل درخواست

   • در موفقیت: لودر متوقف شود و لودینگ ریست شود.

   • در خطا: لودر خاموش شود، پیام خطا نشان داده شود.

   • در هر دو حالت، State لودینگ به حالت اولیه بازگردد.

6. بازبینی کلی برای یکپارچگی استاندارد

   • بررسی تمام دکمه‌ها در کل سیستم Next.js

   • اطمینان از یکدست بودن رفتار لودینگ در همه بخش‌ها.

7. تست کامل سناریوها

   • تست روی کلیک سریع چندباره

   • تست روی خطاهای شبکه

   • تست روی صفحات Server Actions (در صورت استفاده)

   • تست روی فرم‌های چندمرحله‌ای

خروجی مورد انتظار

• تمام دکمه‌های مربوط به API فقط یک بار درخواست ارسال کنند.

• هنگام ارسال، یک لودر کنار دکمه نمایش داده شود.

• دکمه در وضعیت لودینگ غیرفعال باشد.

• ارسال درخواست تکراری کاملاً حذف شود.

• استاندارد لودینگ در کل پروژه Next.js یکپارچه و سازگار باشد.
  --------------------------------------------------------------------------------------------------------
  

  منابع تسک:

  
  

دسترسی به ریپازیتوری پروژه نکست خارجی متارنگ :

https://github.com/iranpsc/Metaverse-Rang-Front-NextJS

لینک سایت رسمی پروژه :

https://rgb.irpsc.com/fa

دسترسی به سامانه مدیریت بر مدیران :

https://crm.irpsc.com