From 0617061c5bcd6e4d1d7c00decfe5a65aefbf8ea9 Mon Sep 17 00:00:00 2001
From: CatsJuice <wp1298554944@hotmail.com>
Date: Fri, 26 Jul 2024 03:35:00 +0000
Subject: [PATCH] fix(core): do not clip center-peek controls to make it appear
 more quickly (#7572)

fix AF-1084

![CleanShot 2024-07-23 at 11.11.03.gif](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/91d593b6-c400-4602-9eab-abb9c0b0f63b.gif)
---
 .../peek-view/view/modal-container.css.ts     |  6 ++
 .../peek-view/view/modal-container.tsx        | 56 +++++++++++++------
 2 files changed, 44 insertions(+), 18 deletions(-)

diff --git a/packages/frontend/core/src/modules/peek-view/view/modal-container.css.ts b/packages/frontend/core/src/modules/peek-view/view/modal-container.css.ts
index ffbbffb3da..4dc4454477 100644
--- a/packages/frontend/core/src/modules/peek-view/view/modal-container.css.ts
+++ b/packages/frontend/core/src/modules/peek-view/view/modal-container.css.ts
@@ -42,6 +42,12 @@ export const modalContentContainer = style({
     },
   },
 });
+export const modalContentClip = style({
+  width: '100%',
+  height: '100%',
+  borderRadius: 'inherit',
+  overflow: 'hidden',
+});
 
 export const dialog = style({
   backgroundColor: cssVar('backgroundOverlayPanelColor'),
diff --git a/packages/frontend/core/src/modules/peek-view/view/modal-container.tsx b/packages/frontend/core/src/modules/peek-view/view/modal-container.tsx
index 97702610b5..8d87d74b6a 100644
--- a/packages/frontend/core/src/modules/peek-view/view/modal-container.tsx
+++ b/packages/frontend/core/src/modules/peek-view/view/modal-container.tsx
@@ -129,7 +129,6 @@ export const PeekViewModalContainer = forwardRef<
         const toRect = to.getBoundingClientRect();
 
         targets.style.position = 'fixed';
-        targets.style.overflow = 'hidden';
         targets.style.opacity = '1';
         lockSizeEl.style.width = zoomIn
           ? `${toRect.width}px`
@@ -179,7 +178,6 @@ export const PeekViewModalContainer = forwardRef<
                 top: '',
                 width: '',
                 height: '',
-                overflow: '',
               });
               Object.assign(lockSizeEl.style, {
                 width: '100%',
@@ -200,6 +198,18 @@ export const PeekViewModalContainer = forwardRef<
     },
     [target]
   );
+  /**
+   * ### Animation timeline:
+   * ```plain
+   *                                      150ms
+   *                                   ⎮ - - - - ⎮
+   * dialog:     +--------400ms--------+
+   * controls:               +-------230ms-------+
+   *             ⎮ - - - - - ⎮
+   *            controls delay =
+   *             400 - 230 + 150
+   * ```
+   */
   const animateZoomIn = useCallback(() => {
     setAnimeState('animating');
     setVtOpen(true);
@@ -214,10 +224,13 @@ export const PeekViewModalContainer = forwardRef<
           opacity: [0, 1],
           duration: 100,
         },
-      })
-        .then(() => animateControls(true))
-        .catch(console.error);
+      }).catch(console.error);
     }, 0);
+    setTimeout(
+      () => animateControls(true),
+      // controls delay: to make sure the time interval for animations of dialog and controls is 150ms.
+      400 - 230 + 150
+    );
   }, [animateControls, zoomAnimate]);
   const animateZoomOut = useCallback(() => {
     setAnimeState('animating');
@@ -308,20 +321,27 @@ export const PeekViewModalContainer = forwardRef<
               ref={contentClipRef}
               className={styles.modalContentContainer}
             >
-              <Dialog.Content
-                {...contentOptions}
-                className={clsx({
-                  [styles.modalContent]: true,
-                  [styles.dialog]: dialogFrame,
-                })}
-              >
-                <Dialog.Title style={{ display: 'none' }} />
-                <div style={{ height: '100%' }} ref={contentRef}>
-                  {children}
-                </div>
-              </Dialog.Content>
+              <div className={styles.modalContentClip}>
+                <Dialog.Content
+                  {...contentOptions}
+                  className={clsx({
+                    [styles.modalContent]: true,
+                    [styles.dialog]: dialogFrame,
+                  })}
+                >
+                  <Dialog.Title style={{ display: 'none' }} />
+                  <div style={{ height: '100%' }} ref={contentRef}>
+                    {children}
+                  </div>
+                </Dialog.Content>
+              </div>
               {controls ? (
-                <div ref={controlsRef} className={styles.modalControls}>
+                <div
+                  // initially hide the controls to prevent flickering for zoom animation
+                  style={{ opacity: animation === 'zoom' ? 0 : undefined }}
+                  ref={controlsRef}
+                  className={styles.modalControls}
+                >
                   {controls}
                 </div>
               ) : null}