From e4023d87e20a9f331a213ad6eec388dc0fe351e5 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Tue, 6 Sep 2022 10:17:52 +0200
Subject: [PATCH] fix: Animation of InputSelect is janky (#4061)

---
 app/components/InputSelect.tsx | 13 ++++++++++++-
 app/components/Scrollable.tsx  |  2 +-
 app/hooks/useMenuHeight.ts     |  2 +-
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/app/components/InputSelect.tsx b/app/components/InputSelect.tsx
index 6770bbca8..7890c94e0 100644
--- a/app/components/InputSelect.tsx
+++ b/app/components/InputSelect.tsx
@@ -13,7 +13,13 @@ import styled, { css } from "styled-components";
 import Button, { Inner } from "~/components/Button";
 import Text from "~/components/Text";
 import useMenuHeight from "~/hooks/useMenuHeight";
-import { Position, Background, Backdrop, Placement } from "./ContextMenu";
+import { fadeAndScaleIn } from "~/styles/animations";
+import {
+  Position,
+  Background as ContextMenuBackground,
+  Backdrop,
+  Placement,
+} from "./ContextMenu";
 import { MenuAnchorCSS } from "./ContextMenu/MenuItem";
 import { LabelText } from "./Input";
 
@@ -170,6 +176,7 @@ const InputSelect = (props: Props) => {
                   ref={contentRef}
                   topAnchor={topAnchor}
                   rightAnchor={rightAnchor}
+                  hiddenScrollbars
                   style={
                     maxHeight && topAnchor
                       ? {
@@ -216,6 +223,10 @@ const InputSelect = (props: Props) => {
   );
 };
 
+const Background = styled(ContextMenuBackground)`
+  animation: ${fadeAndScaleIn} 200ms ease;
+`;
+
 const Placeholder = styled.span`
   color: ${(props) => props.theme.placeholder};
 `;
diff --git a/app/components/Scrollable.tsx b/app/components/Scrollable.tsx
index 038bc152c..3116e5a22 100644
--- a/app/components/Scrollable.tsx
+++ b/app/components/Scrollable.tsx
@@ -92,7 +92,7 @@ const Wrapper = styled.div<{
 
     return "none";
   }};
-  transition: all 100ms ease-in-out;
+  transition: box-shadow 100ms ease-in-out;
 
   ${(props) =>
     props.$hiddenScrollbars &&
diff --git a/app/hooks/useMenuHeight.ts b/app/hooks/useMenuHeight.ts
index 53214b85b..77f6feb0f 100644
--- a/app/hooks/useMenuHeight.ts
+++ b/app/hooks/useMenuHeight.ts
@@ -10,7 +10,7 @@ const useMenuHeight = (
   const isMobile = useMobile();
   const { height: windowHeight } = useWindowSize();
 
-  React.useLayoutEffect(() => {
+  React.useEffect(() => {
     const padding = 8;
 
     if (visible && !isMobile) {