From ba541e76dce75875aa69f3b6a0f69d800c069b8c Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Thu, 12 Nov 2020 04:10:55 -0800
Subject: [PATCH] Fix slowly disappearing NUX element

Summary: This issue was reported in the dogfooding group. https://fb.prod.workplace.com/groups/748354712423318/permalink/759865114605611/

Reviewed By: jknoxville

Differential Revision: D24918536

fbshipit-source-id: 7c353dfe1230fa98964216a35e9679a90f398e1d
---
 desktop/flipper-plugin/src/ui/NUX.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/desktop/flipper-plugin/src/ui/NUX.tsx b/desktop/flipper-plugin/src/ui/NUX.tsx
index 5e2cf9247..5a5f8e74d 100644
--- a/desktop/flipper-plugin/src/ui/NUX.tsx
+++ b/desktop/flipper-plugin/src/ui/NUX.tsx
@@ -104,7 +104,7 @@ export function NUX({
   }, [title, manager, pluginInstance]);
 
   return (
-    <Badge
+    <UnanimatedBadge
       count={
         isRead ? (
           0
@@ -130,10 +130,18 @@ export function NUX({
         )
       }>
       {children}
-    </Badge>
+    </UnanimatedBadge>
   );
 }
 
+// We force visibility of the badge to invisible if count has dropped,
+// otherwise ANT will await animation end, which looks really awkard, see D24918536
+const UnanimatedBadge = styled(Badge)(({count}) => ({
+  '.ant-scroll-number-custom-component': {
+    visibility: count === 0 ? 'hidden' : undefined,
+  },
+}));
+
 const pulse = keyframes({
   '0%': {
     opacity: 0.2,