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

@@ -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,15 +237,15 @@ 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>,
         );
       }
 
       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>
   );
 }