fix(Tweaks): Mobile menu notification badge transition (#1958)

Co-authored-by: April Sylph <28949509+AprilSylph@users.noreply.github.com>

Author: marcustyphoon

src/features/tweaks/subtle_activity_mutuals.js

@@ -75,6 +75,8 @@ const processLabels = labels => labels.forEach(label => {
   span.classList.add(spanClass);
 });
 
+// Resolves after (at least) one browser repaint. A single requestAnimationFrame callback is fired just before
+// the currently pending frame repaint; a second will be scheduled to affect the following frame.
 const waitForRender = () =>
   new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
 

src/utils/mobile_menu_badge_hide.js

@@ -5,9 +5,20 @@ import { pageModifications } from './mutations.js';
 
 const mobileBadgeSelector = `header ${keyToCss('hamburger')} + ${keyToCss('notificationBadge')}`;
 const hideBadgeClass = 'xkit-hide-mobile-menu-badge';
+const noTransitionClass = 'xkit-hide-mobile-menu-badge-no-transition';
+
+// Load injected utility into module cache
+inject('/main_world/unbury_mobile_badge_data.js');
 
 document.documentElement.append(
-  buildStyle(`.${hideBadgeClass} ${mobileBadgeSelector} { transform: scale(0); }`),
+  buildStyle(`
+    .${hideBadgeClass} ${mobileBadgeSelector} {
+      transform: scale(0);
+    }
+    .${noTransitionClass} ${mobileBadgeSelector} {
+      transition: none;
+    }
+  `),
 );
 
 /** @typedef {'home' | 'communities' | 'activity' | 'messages' | 'inbox' | 'account'} NotificationType */
@@ -58,5 +69,19 @@ export const mobileMenuBadgeHide = Object.freeze({
   },
 });
 
-pageModifications.register(mobileBadgeSelector, () => mobileMenuBadgeHide.trigger());
+// Resolves after (at least) one browser repaint. A single requestAnimationFrame callback is fired just before
+// the currently pending frame repaint; a second will be scheduled to affect the following frame.
+const waitForRender = () =>
+  new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+
+const onResizeIntoTabletLayout = async () => {
+  document.documentElement.classList.add(noTransitionClass);
+
+  mobileMenuBadgeHide.trigger();
+
+  await waitForRender();
+  document.documentElement.classList.remove(noTransitionClass);
+};
+
+pageModifications.register(mobileBadgeSelector, onResizeIntoTabletLayout);
 setInterval(() => mobileMenuBadgeHide.trigger(), 10_000);