שש כרטיסיות בדשבורד, שישה ספינרים, והן לא מופיעות יחד — הן מופיעות אחת אחת כמו דומינו, כי כל כרטיסייה התחילה לטעון רק אחרי שזו שמעליה סיימה. זהו מפל, והזמן הכולל להמתנה אינו הבקשה האיטית ביותר אלא סכום כולם. use() ו-Suspense שוברים את השרשרת — אבל המעניין הוא המנגנון הפנימי: מה קומפוננטה מושהית זורקת בפועל, וכיצד HTML שמגיע בסדר שגוי בכל זאת נוחת במקום הנכון.
יש סיבה שפרלקס JavaScript תמיד נראה קצת לא נכון — קצת מנותק, כאילו השכבות שוחות חצי פריים מאחורי הדף. זה לא קוד רשלני. זה בגלל שאירועי גלילה מגיעים ל-JavaScript אחרי שהדפדפן כבר ציייר את הגלילה. הדפדפן פתר את זה פעם אחת, כשהפך כותרות דביקות ל-position: sticky. Scroll-driven animations הוא אותה המהלך, מיושם על כל האפקטים הקשורים לגלילה בבת אחת.
עשר שנים, אנימציה של תמונה ממוזערת לתמונת הירו אמרה טכניקה אחת: מדוד לפני, מדוד אחרי, זייף את ההבדל עם transform ונגן. FLIP. כל ספריית אנימציות עושה זאת, וכל אחת משלמת על כך ב-JavaScript על ה-thread הראשי ברגע הגרוע ביותר האפשרי. View Transitions API מעביר את כל הטריק לדפדפן — ומאז React 19.2 ו-Next.js 16, כל החוזה מורכב מ-prop אחד בשם name.
במאמר על מיקרו-אינטראקציות כתבתי ש-transform ו-opacity מונפשים בתהליך הקומפוזיטור, כך שאפילו עמוד כבד לא אמור לגמגם באנימציית כפתור. זה עדיין נכון – עם הסתייגות אחת שהמאמר ההוא שתק לגביה: אם התהליך הראשי חסום על ידי משימת JS ארוכה, האנימציה עלולה לעולם לא לקבל הזדמנות להתחיל, כי ה-handler של הלחיצה עצמו ממתין בתור. INP היא המדד שמודד בדיוק את הפער הזה – ו-scheduler.yield() היא אחת הדרכים המעטות לסגור אותו באמת.
רשימה של אלף תגובות מתרנדרת לאט, אז אתם פונים ל-react-window – ובתמורה לגלילה חלקה מאבדים את Ctrl+F, הדפסת העמוד וחלק מהניווט של קורא מסך, כי אלמנטים מחוץ לחלון מפסיקים להתקיים פיזית ב-DOM. content-visibility פותר את אותה בעיה אחרת: האלמנטים נשארים ב-DOM, הדפדפן פשוט מדלג עבורם על העבודה היקרה של layout וציור, עד שהם מגיעים קרוב לאזור הנראה – ובאופן מפתיע, יודע לחשוף אותם זמנית כשמחפשים בהם טקסט.
במאמר על נגישות היה מודל עם display:none שבכל זאת המשיך להתקיים בעץ הנגישות – דוגמה לשגיאה שנובעת מבניית מודל מאפס על divים. השאלה האמיתית היא: למה בכלל היה צריך לבנות אותו מאפס? בודק מה מקבלים בחינם מ-<dialog> הטבעי ומהתכונה popover – top layer, מלכודת פוקוס, light dismiss – ואיפה שני המנגנונים האלה שונים מספיק כדי שבלבול ביניהם יוביל ישר לממשק לא נגיש.
