use requestAnimationFrame for fade-in effect

Telefonica · Nov 11, 2024 · dd61e23 · dd61e23
1 parent b9a0ca8
commit dd61e23
Showing 1 changed file with 2 additions and 1 deletion.
diff --git a/src/navigation-bar.tsx b/src/navigation-bar.tsx
@@ -837,7 +837,8 @@ const MainNavigationBarDesktopMenuContent = ({
             // If menu is opening, trigger the fade-in effect for current section
             if (menuStatus === 'opening') {
                 setIsContentVisible(false);
-                setTimeout(() => setIsContentVisible(true), 0);
+                const id = requestAnimationFrame(() => setIsContentVisible(true));
+                return () => cancelAnimationFrame(id);
             } else {
                 setIsContentVisible(true);
             }