‏الگوی تاخیر و پرش تولتیپ‌ها تو ری‌اکت

تو صفحه‌ی لیست سوالای مصاحبه‌ی FrontPrep، کنار هر سوال لوگوی شرکت‌ها نشون داده می‌شه و وقتی کاربر نشونگر ماوس رو می‌بره روی لوگو، یه تولتیپ اسم شرکت رو نشون می‌ده. نویسنده اولش delay تولتیپ‌ها رو صفر گذاشته بود، برای همین وقتی ماوس سریع از رو صفحه رد می‌شد، همه‌ی تولتیپ‌ها یهو و پشت سر هم باز می‌شدن. با اضافه کردن یه تاخیر ۲۰۰ میلی‌ثانیه‌ای این مشکل حل شد، ولی یه مشکل جدید ساخت: تو ردیف‌هایی که چند لوگو کنار هم بودن، رد شدن از یه لوگو به لوگوی بعدی هم دوباره همون ۲۰۰ میلی‌ثانیه معطلی داشت و کند به نظر می‌رسید.

راه‌حلی که نویسنده پیدا کرده سه‌تا حالته: وقتی کاربر رو یه لوگو هاور کنه، تولتیپ ۲۰۰ میلی‌ثانیه صبر می‌کنه و باز می‌شه. وقتی تولتیپ بسته می‌شه، یه پنجره‌ی «گرم» به مدت ۳۰۰ میلی‌ثانیه شروع می‌شه؛ اگه تو همین بازه رو یه لوگوی دیگه هاور کنه، تولتیپ بعدی بدون هیچ تاخیر یا انیمیشنی فوری باز می‌شه. اگه این ۳۰۰ میلی‌ثانیه بدون هاور جدید تموم بشه، صفحه دوباره «سرد» می‌شه و دفعه‌ی بعد دوباره باید همون ۲۰۰ میلی‌ثانیه رو منتظر بمونه.

پیاده‌سازیش تو ری‌اکت با یه context مشترکه که وضعیت گرم یا سرد بودن رو نگه می‌داره. نکته‌ی مهم اینه که این وضعیت به‌جای state معمولی، توی یه ref ذخیره می‌شه، چون تغییرش نباید باعث رندر دوباره‌ی همه‌ی تولتیپ‌های صفحه بشه:

function handleEnter() {
  if (tooltips.isWarm) {
    show();
    return;
  }
  openTimer.current = setTimeout(show, tooltips.openDelay);
}

وقتی صفحه گرمه، تولتیپ باید بدون انیمیشن باز بشه؛ برای همین یه data attribute به تولتیپ اضافه می‌شه که با CSS مدت transition رو صفر می‌کنه:

.tooltip[data-instant="true"] {
  transition-duration: 0ms;
}

نویسنده می‌گه عدد ۲۰۰ میلی‌ثانیه رو هم از رو تجربه انتخاب کرده: کمتر از ۱۵۰ میلی‌ثانیه باعث می‌شه حتی رد شدن ساده‌ی ماوس هم تولتیپ رو باز کنه، و بیشتر از ۲۵۰ میلی‌ثانیه هاور عمدی هم کند به نظر می‌رسه. اون این الگو رو به‌صورت یه Claude skill هم منتشر کرده که می‌شه باهاش کدبیس‌های دیگه رو برای همین جور مشکل‌های تایمینگ تولتیپ بررسی کرد.

نکات کلیدی:

• تاخیر باز شدن تولتیپ ۲۰۰ میلی‌ثانیه و پنجره‌ی گرم بعد از بسته شدنش ۳۰۰ میلی‌ثانیه‌ست
• توی پنجره‌ی گرم، تولتیپ بعدی بدون تاخیر و بدون انیمیشن باز می‌شه
• وضعیت گرم یا سرد بودن با useRef نگه داشته می‌شه نه useState، تا رندر اضافه‌ای اتفاق نیفته
• نویسنده این الگو رو به شکل یه Claude skill هم منتشر کرده برای بررسی کدبیس‌های دیگه