AnimatedReorderGroup: ignore small distance animation to workaround V…

…SCode 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

@@ -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);