Only scroll to the selected node once

app/components/JsonTreeView.tsx

@@ -1,5 +1,5 @@
 import { ChevronDownIcon, ChevronRightIcon } from "@heroicons/react/outline";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import {
   useJsonColumnViewAPI,
   useJsonColumnViewState,
@@ -15,11 +15,14 @@ export function JsonTreeView() {
 
   const { tree, parentRef } = useJsonTreeViewContext();
 
+  const scrolledToNodeRef = useRef(false);
+
   useEffect(() => {
-    if (selectedNodeId) {
+    if (!scrolledToNodeRef.current && selectedNodeId) {
       tree.scrollToNode(selectedNodeId);
+      scrolledToNodeRef.current = true;
     }
-  }, [selectedNodeId]);
+  }, [selectedNodeId, scrolledToNodeRef]);
 
   return (
     <div

app/hooks/useVirtualTree.ts

@@ -160,7 +160,7 @@ export function useVirtualTree<T extends { id: string; children?: T[] }, R>(
       const itemIndex = state.items.findIndex((item) => item.id === id);
 
       if (itemIndex !== -1) {
-        rowVirtualizer.scrollToIndex(itemIndex, { align: "auto" });
+        rowVirtualizer.scrollToIndex(itemIndex, { align: "center" });
       }
     },
     [state.items, rowVirtualizer]