From 075c9e1ddade44287af1efbe716f85d6fe8abd6c Mon Sep 17 00:00:00 2001 From: Michel Weststrate Date: Fri, 19 Aug 2022 04:28:43 -0700 Subject: [PATCH] Disable NUX animations Summary: I noticed that on my Mac M1 Flipper feels really sluggish in term of interactions compared to my Mac Pro. Started profiling and notices we have continously 60 reflows/sec and a very continous stream of DOM nodes allocations. This in turn is caused by our NUX elements, whose opacity anymation causes a reflow, which causes our interactive container (used for resizable sidebars etc) do to some calculations. This is quite noticeble in how fluent clicks etc are handled, as long as there are NUX-es open. Not sure why this doesn't feel as bad on Intel machines, but alas the effect is very clearly visible in the performance monitor. Or when dismissing all NUX-es, which drops the performance issue even in current builds. Disabling the opacity anymation and giving it a fixed value, fixes the issue as well, which is done in this diff. Changelog: Minor improvements on M1 machines Reviewed By: passy Differential Revision: D38859406 fbshipit-source-id: 3b97c6c8444290e2a0a8b17b175de9e44159e258 --- desktop/flipper-plugin/src/ui/NUX.tsx | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/desktop/flipper-plugin/src/ui/NUX.tsx b/desktop/flipper-plugin/src/ui/NUX.tsx index af2f5d273..6682e2e41 100644 --- a/desktop/flipper-plugin/src/ui/NUX.tsx +++ b/desktop/flipper-plugin/src/ui/NUX.tsx @@ -162,19 +162,10 @@ const UnanimatedBadge = styled(Badge)(({count}) => ({ }, })); -const pulse = keyframes({ - '0%': { - opacity: 0.2, - }, - '100%': { - opacity: 1, - }, -}); - const Pulse = styled.div({ cursor: 'pointer', background: theme.warningColor, - animation: `${pulse} 2s infinite alternate`, + opacity: 0.6, borderRadius: 20, height: 12, width: 12,