From 7342957afd3ae2ad4945b53397ae0febc1de5ab4 Mon Sep 17 00:00:00 2001
From: Jun Wu <quark@meta.com>
Date: Tue, 16 Jan 2024 13:30:42 -0800
Subject: [PATCH] RenderDag: enable animation

Summary:
Get animation with just 4-line change!

There are feedback about animation (ex. fading in or out the menu) could
hurt productivity. In this case, it's a sliding, not fading animation, making
it a bit easier to follow what are changed / moved / not changed. So it seems
to provide some value.

With this, for example, it seems to make sense to avoid double "You were here",
"You are moving here" labels, since the moving source is animated to destination.

Reviewed By: muirdm, evangrayk

Differential Revision: D52667620

fbshipit-source-id: e241454ca0d04d4d51ec307b293881ac1e97bba4
---
 addons/isl/src/RenderDag.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/addons/isl/src/RenderDag.tsx b/addons/isl/src/RenderDag.tsx
index 557a5b8336d50..94b5a004e3ebe 100644
--- a/addons/isl/src/RenderDag.tsx
+++ b/addons/isl/src/RenderDag.tsx
@@ -8,6 +8,7 @@
 import type {Dag, DagCommitInfo} from './dag/dag';
 import type {HashSet} from './dag/set';
 
+import {AnimatedReorderGroup} from './AnimatedReorderGroup';
 import {AvatarPattern} from './Avatar';
 import {InlineBadge} from './InlineBadge';
 import {LinkLine, NodeLine, PadLine, Renderer} from './dag/render';
@@ -236,7 +237,7 @@ export function RenderDag(props: RenderDagProps) {
       //   +------+---------+
       if (isIrregular) {
         renderedRows.push(
-          <div className="render-dag-row" key={'top:' + info.hash}>
+          <div className="render-dag-row" data-reorder-id={'.'} key={'top:' + info.hash}>
             <div className="render-dag-row-left-side">{nodeLinePart}</div>
           </div>,
         );
@@ -244,7 +245,7 @@ export function RenderDag(props: RenderDagProps) {
 
       const rightSide = <div className="render-dag-row-right-side">{renderCommit?.(info)}</div>;
       renderedRows.push(
-        <div className="render-dag-row" key={info.hash}>
+        <div className="render-dag-row" data-reorder-id={info.hash} key={info.hash}>
           {leftSide}
           {rightSide}
         </div>,
@@ -255,7 +256,7 @@ export function RenderDag(props: RenderDagProps) {
   const fullClassName = ((className ?? '') + ' render-dag').trimStart();
   return (
     <div className={fullClassName} {...restProps}>
-      {renderedRows}
+      <AnimatedReorderGroup animationDuration={100}>{renderedRows}</AnimatedReorderGroup>
     </div>
   );
 }