From 8acecb662685563ae6fc3427c0e503ce17606d50 Mon Sep 17 00:00:00 2001
From: Jun Wu <quark@meta.com>
Date: Tue, 16 Jan 2024 13:30:42 -0800
Subject: [PATCH] AnimatedReorderGroup: ignore small distance animation to
 workaround VSCode button rendering

Summary:
I notice that when committing, while the optimistic state matches the final
state, the commits below moves up and down unnecessarily.

Upon debugging using a breakpoint in AnimatedReorderGroup when it decides to
animate, I found a 4px animation, and the VSCode buttons [Uncommit] [Split]
were in its "primary" style, with a larger height first rendered. Apparently
the VSCode button then change to the specified "icon" style, with a different
height, but it does not do that in the first render. There are enough pitfalls
in VSCode toolkit we might want to just replace it... but for now let's
workaround the issue by ignoring small distance animation.

Screenshot when hitting the breakpoint - buttons have wrong style and height:
 {F1272099178}

Reviewed By: zzl0

Differential Revision: D52667618

fbshipit-source-id: c183d7c60ce0e5da19afd39bf696cff89f5650a3
---
 addons/isl/src/AnimatedReorderGroup.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/addons/isl/src/AnimatedReorderGroup.tsx b/addons/isl/src/AnimatedReorderGroup.tsx
index 5f7ab4709b863..ec70125c3739c 100644
--- a/addons/isl/src/AnimatedReorderGroup.tsx
+++ b/addons/isl/src/AnimatedReorderGroup.tsx
@@ -11,6 +11,7 @@ import React, {useRef, useLayoutEffect} from 'react';
 type ReorderGroupProps = {
   children: React.ReactElement[];
   animationDuration?: number;
+  animationMinPixel?: number;
 };
 
 type PreviousState = {
@@ -40,14 +41,15 @@ const emptyPreviousState: Readonly<PreviousState> = {
 export const AnimatedReorderGroup: React.FC<ReorderGroupProps> = ({
   children,
   animationDuration,
+  animationMinPixel,
   ...props
 }) => {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const previousStateRef = useRef<Readonly<PreviousState>>(emptyPreviousState);
 
   useLayoutEffect(() => {
-    updatePreviousState(containerRef, previousStateRef, true, animationDuration);
-  }, [children, animationDuration]);
+    updatePreviousState(containerRef, previousStateRef, true, animationDuration, animationMinPixel);
+  }, [children, animationDuration, animationMinPixel]);
 
   // Try to get the rects of old children right before rendering new children
   // and calling the LayoutEffect callback. This captures position changes
@@ -76,6 +78,7 @@ function updatePreviousState(
   previousStateRef: React.MutableRefObject<Readonly<PreviousState>>,
   animate = false,
   animationDuration = 200,
+  animationMinPixel = 5,
 ) {
   const elements = scanElements(containerRef);
   const idList: Array<string> = [];
@@ -93,10 +96,12 @@ function updatePreviousState(
         // Animate from old to the new (current) rect.
         const dx = oldBox.left - newBox.left;
         const dy = oldBox.top - newBox.top;
-        element.animate(
-          [{transform: `translate(${dx}px,${dy}px)`}, {transform: 'translate(0,0)'}],
-          {duration: animationDuration, easing: 'ease-out'},
-        );
+        if (Math.abs(dx) + Math.abs(dy) > animationMinPixel) {
+          element.animate(
+            [{transform: `translate(${dx}px,${dy}px)`}, {transform: 'translate(0,0)'}],
+            {duration: animationDuration, easing: 'ease-out'},
+          );
+        }
       }
     }
     rectMap.set(reorderId, newBox);