From 5e9bbb42f195e4edc4ec2e5dcfb26c1abda2096c Mon Sep 17 00:00:00 2001
From: trevor-signal <131492920+trevor-signal@users.noreply.github.com>
Date: Tue, 20 Jun 2023 19:38:16 -0400
Subject: [PATCH] Update modal animation states to ensure proper dismissal

---
 ts/hooks/useAnimated.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/ts/hooks/useAnimated.tsx b/ts/hooks/useAnimated.tsx
index 198070af7a..61bca88e74 100644
--- a/ts/hooks/useAnimated.tsx
+++ b/ts/hooks/useAnimated.tsx
@@ -12,6 +12,7 @@ export type ModalConfigType = {
 };
 
 enum ModalState {
+  Opening = 'Opening',
   Open = 'Open',
   Closing = 'Closing',
   Closed = 'Closed',
@@ -32,19 +33,22 @@ export function useAnimated(
   modalStyles: SpringValues<ModalConfigType>;
   overlayStyles: SpringValues<ModalConfigType>;
 } {
-  const [state, setState] = useState(ModalState.Open);
-  const isOpen = state === ModalState.Open;
+  const [state, setState] = useState(ModalState.Opening);
+  const shouldShowModal =
+    state === ModalState.Open || state === ModalState.Opening;
   const isClosed = state === ModalState.Closed;
 
   const modalRef = useSpringRef();
 
   const modalStyles = useSpring({
-    from: getFrom(isOpen),
-    to: getTo(isOpen),
+    from: getFrom(shouldShowModal),
+    to: getTo(shouldShowModal),
     onRest: () => {
       if (state === ModalState.Closing) {
         setState(ModalState.Closed);
         onClose();
+      } else if (state === ModalState.Opening) {
+        setState(ModalState.Open);
       }
     },
     config: {
@@ -60,7 +64,7 @@ export function useAnimated(
 
   const overlayStyles = useSpring({
     from: { opacity: 0 },
-    to: { opacity: isOpen ? 1 : 0 },
+    to: { opacity: shouldShowModal ? 1 : 0 },
     config: {
       clamp: true,
       friction: 22,
@@ -69,7 +73,7 @@ export function useAnimated(
     ref: overlayRef,
   });
 
-  useChain(isOpen ? [overlayRef, modalRef] : [modalRef, overlayRef]);
+  useChain(shouldShowModal ? [overlayRef, modalRef] : [modalRef, overlayRef]);
   const close = useCallback(() => {
     setState(currentState => {
       if (currentState === ModalState.Open) {