fix(lemon-ui): Make popovers/dropdowns snappy

PostHog · Oct 30, 2023 · 47bf6d8 · 47bf6d8
1 parent 211aeb2
commit 47bf6d8
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/frontend/src/lib/lemon-ui/Popover/Popover.scss b/frontend/src/lib/lemon-ui/Popover/Popover.scss
@@ -24,7 +24,7 @@
 
 .Popover__box {
     position: relative; // For arrow
-    transition: opacity 100ms ease, transform 100ms ease;
+    transition: opacity 50ms ease, transform 50ms ease;
     transform-origin: top;
     box-shadow: var(--shadow-elevation);
     background: var(--bg-light);
@@ -75,21 +75,22 @@
     }
 
     .Popover[data-placement^='bottom'] & {
-        transform: rotateX(-12deg);
+        transform: rotateX(-6deg);
     }
 
     .Popover[data-placement^='top'] & {
-        transform: rotateX(12deg);
+        transform: rotateX(6deg);
     }
 
     .Popover[data-placement^='left'] & {
-        transform: rotateY(-12deg);
+        transform: rotateY(-6deg);
     }
 
     .Popover[data-placement^='right'] & {
-        transform: rotateY(12deg);
+        transform: rotateY(6deg);
     }
 
+    .Popover.Popover--enter-active &,
     .Popover.Popover--enter-done & {
         opacity: 1;
         transform: none;

diff --git a/frontend/src/lib/lemon-ui/Popover/Popover.tsx b/frontend/src/lib/lemon-ui/Popover/Popover.tsx
@@ -210,7 +210,7 @@ export const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(function P
                 </PopoverReferenceContext.Provider>
             )}
             <FloatingPortal root={getPopupContainer?.()}>
-                <CSSTransition in={visible} timeout={100} classNames="Popover-" appear mountOnEnter unmountOnExit>
+                <CSSTransition in={visible} timeout={50} classNames="Popover-" appear mountOnEnter unmountOnExit>
                     <PopoverOverlayContext.Provider value={[visible, currentPopoverLevel]}>
                         <div
                             className={clsx(