diff --git a/src/components/common/TreeExplorer.vue b/src/components/common/TreeExplorer.vue
index 828d8ff45a..27bf035569 100644
--- a/src/components/common/TreeExplorer.vue
+++ b/src/components/common/TreeExplorer.vue
@@ -1,45 +1,55 @@
 <template>
-  <Tree
-    v-model:expanded-keys="expandedKeys"
-    v-model:selection-keys="selectionKeys"
-    class="tree-explorer px-2 py-0 2xl:px-4 bg-transparent"
-    :class="props.class"
-    :value="renderedRoot.children"
-    selection-mode="single"
-    :pt="{
-      nodeLabel: 'tree-explorer-node-label',
-      nodeContent: ({ context }) => ({
-        class: 'group/tree-node',
-        onClick: (e: MouseEvent) =>
-          onNodeContentClick(e, context.node as RenderedTreeExplorerNode),
-        onContextmenu: (e: MouseEvent) =>
-          handleContextMenu(e, context.node as RenderedTreeExplorerNode)
-      }),
-      nodeToggleButton: () => ({
-        onClick: (e: MouseEvent) => {
-          e.stopImmediatePropagation()
-        }
-      })
-    }"
+  <div
+    ref="treeContainerRef"
+    class="tree-container overflow-y-auto max-h-[calc(100vh-144px)]"
+    @scroll="handleTreeScroll"
+    @mouseleave="handleMouseLeave"
   >
-    <template #folder="{ node }">
-      <slot name="folder" :node="node">
-        <TreeExplorerTreeNode :node="node" />
-      </slot>
-    </template>
-    <template #node="{ node }">
-      <slot name="node" :node="node">
-        <TreeExplorerTreeNode :node="node" />
-      </slot>
-    </template>
-  </Tree>
+    <Tree
+      v-model:expanded-keys="expandedKeys"
+      v-model:selection-keys="selectionKeys"
+      class="tree-explorer px-2 py-0 2xl:px-4 bg-transparent"
+      :class="props.class"
+      :value="displayRoot.children"
+      selection-mode="single"
+      :pt="{
+        nodeLabel: 'tree-explorer-node-label',
+        nodeContent: ({ context }) => ({
+          class: 'group/tree-node',
+          onClick: (e: MouseEvent) =>
+            onNodeContentClick(e, context.node as RenderedTreeExplorerNode),
+          onContextmenu: (e: MouseEvent) =>
+            handleContextMenu(e, context.node as RenderedTreeExplorerNode)
+        }),
+        nodeToggleButton: () => ({
+          onClick: (e: MouseEvent) => {
+            e.stopImmediatePropagation()
+          }
+        }),
+        nodeChildren: ({ instance }) =>
+          getNodeChildrenStyle(instance?.node as RenderedTreeExplorerNode)
+      }"
+    >
+      <template #folder="{ node }">
+        <slot name="folder" :node="node">
+          <TreeExplorerTreeNode :node="node" />
+        </slot>
+      </template>
+      <template #node="{ node }">
+        <slot name="node" :node="node">
+          <TreeExplorerTreeNode :node="node" />
+        </slot>
+      </template>
+    </Tree>
+  </div>
   <ContextMenu ref="menu" :model="menuItems" />
 </template>
 <script setup lang="ts">
+import { useThrottleFn } from '@vueuse/core'
 import ContextMenu from 'primevue/contextmenu'
 import type { MenuItem, MenuItemCommandEvent } from 'primevue/menuitem'
 import Tree from 'primevue/tree'
-import { computed, provide, ref } from 'vue'
+import { computed, provide, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
@@ -53,7 +63,16 @@ import type {
   RenderedTreeExplorerNode,
   TreeExplorerNode
 } from '@/types/treeExplorerTypes'
-import { combineTrees, findNodeByKey } from '@/utils/treeUtil'
+import { combineTrees } from '@/utils/treeUtil'
+import type { WindowRange } from '@/utils/virtualListUtils'
+import {
+  applyWindow as applyWindowUtil,
+  calculateScrollPercentage,
+  calculateSpacerHeights,
+  createInitialWindowRange,
+  shiftWindowBackward as shiftWindowBackwardUtil,
+  shiftWindowForward as shiftWindowForwardUtil
+} from '@/utils/virtualListUtils'
 
 const expandedKeys = defineModel<Record<string, boolean>>('expandedKeys', {
   required: true
@@ -84,28 +103,282 @@ const {
   }
 )
 
+// Sliding window configuration
+const WINDOW_SIZE = 60
+const BUFFER_SIZE = 20
+const NODE_HEIGHT = 28 // Approximate height per tree node in pixels
+const SCROLL_FORWARD_THRESHOLD = 0.7 // Shift window forward when scrolled past 70%
+const SCROLL_BACKWARD_THRESHOLD = 0.3 // Shift window backward when scrolled below 30%
+const SCROLL_THROTTLE_MS = 100 // Throttle scroll handler to every 100ms
+const MAX_SCROLL_ITERATIONS = 5
+
+// For each parent node, track the sliding window range [start, end)
+const parentWindowRanges = ref<Record<string, WindowRange>>({})
+
+// Reset window ranges when nodes are collapsed
+watch(
+  expandedKeys,
+  (newKeys, oldKeys) => {
+    if (!oldKeys) return
+    for (const key in oldKeys) {
+      if (oldKeys[key] && !newKeys[key]) {
+        delete parentWindowRanges.value[key]
+      }
+    }
+  },
+  { deep: true }
+)
+
+// Ref to access the tree container for scroll detection
+const treeContainerRef = ref<HTMLDivElement | null>(null)
+
+// Calculate total top and bottom spacer heights from all expanded nodes
+const getTotalSpacerHeights = () => {
+  let topTotal = 0
+  let bottomTotal = 0
+
+  const calculateForNode = (node: RenderedTreeExplorerNode) => {
+    if (!node.children || node.leaf) return
+    const isExpanded = expandedKeys.value?.[node.key] ?? false
+    if (!isExpanded) return
+
+    const totalChildren = node.children.length
+    const range =
+      parentWindowRanges.value[node.key] ??
+      createInitialWindowRange(totalChildren, WINDOW_SIZE)
+
+    const { topSpacer, bottomSpacer } = calculateSpacerHeights(
+      totalChildren,
+      range,
+      NODE_HEIGHT
+    )
+    topTotal += topSpacer
+    bottomTotal += bottomSpacer
+
+    // Recursively check children in the window
+    for (let i = range.start; i < range.end && i < node.children.length; i++) {
+      calculateForNode(node.children[i])
+    }
+  }
+
+  for (const child of renderedRoot.value.children || []) {
+    calculateForNode(child)
+  }
+
+  return { topTotal, bottomTotal }
+}
+
+// Reset window to the beginning for a single node (recursive)
+const resetNodeWindowToTop = (node: RenderedTreeExplorerNode) => {
+  if (!node.children || node.leaf) return
+  const isExpanded = expandedKeys.value?.[node.key] ?? false
+  if (!isExpanded) return
+
+  parentWindowRanges.value[node.key] = createInitialWindowRange(
+    node.children.length,
+    WINDOW_SIZE
+  )
+
+  // Recursively reset children
+  for (const child of node.children) {
+    if (expandedKeys.value?.[child.key]) {
+      resetNodeWindowToTop(child)
+    }
+  }
+}
+
+// Reset all windows to the beginning
+const resetWindowsToTop = () => {
+  for (const parent of renderedRoot.value.children || []) {
+    resetNodeWindowToTop(parent)
+  }
+}
+
+const handleMouseLeave = (): void => {
+  if (!treeContainerRef.value) return
+  const container = treeContainerRef.value
+
+  if (container.scrollTop === 0) {
+    resetWindowsToTop()
+    return
+  }
+
+  const scrollPercentage = recalcScrollPercentage(container)
+
+  if (scrollPercentage > SCROLL_FORWARD_THRESHOLD) {
+    shiftWindowsForward()
+  } else if (scrollPercentage < SCROLL_BACKWARD_THRESHOLD) {
+    shiftWindowsBackward()
+  }
+}
+
+// Recalculate scroll percentage with current spacer heights
+const recalcScrollPercentage = (container: HTMLDivElement): number => {
+  const { topTotal, bottomTotal } = getTotalSpacerHeights()
+  return calculateScrollPercentage(
+    container.scrollTop,
+    container.scrollHeight,
+    container.clientHeight,
+    topTotal,
+    bottomTotal
+  )
+}
+
+// Scroll handler with throttling
+// In very fast scrolls, a single window shift might not be enough to
+// "catch up" with the scroll position, especially once the cursor leaves
+// the sidebar and further scroll events stop firing.
+// We conservatively allow a few iterations per scroll event to realign
+// the active window with the current scroll position.
+const handleTreeScroll = useThrottleFn((): void => {
+  if (!treeContainerRef.value) return
+  const container = treeContainerRef.value
+
+  if (container.scrollTop === 0) {
+    resetWindowsToTop()
+    return
+  }
+
+  let iterations = 0
+  let scrollPercentage = recalcScrollPercentage(container)
+
+  while (
+    scrollPercentage > SCROLL_FORWARD_THRESHOLD &&
+    iterations < MAX_SCROLL_ITERATIONS
+  ) {
+    shiftWindowsForward()
+    iterations += 1
+    scrollPercentage = recalcScrollPercentage(container)
+  }
+
+  while (
+    scrollPercentage < SCROLL_BACKWARD_THRESHOLD &&
+    iterations < MAX_SCROLL_ITERATIONS
+  ) {
+    shiftWindowsBackward()
+    iterations += 1
+    scrollPercentage = recalcScrollPercentage(container)
+  }
+}, SCROLL_THROTTLE_MS)
+
+// Shift window for a single node in given direction (recursive)
+type ShiftDirection = 'forward' | 'backward'
+
+const shiftNodeWindow = (
+  node: RenderedTreeExplorerNode,
+  direction: ShiftDirection
+) => {
+  if (!node.children || node.leaf) return
+  const isExpanded = expandedKeys.value?.[node.key] ?? false
+  if (!isExpanded) return
+
+  const totalChildren = node.children.length
+  const range =
+    parentWindowRanges.value[node.key] ??
+    createInitialWindowRange(totalChildren, WINDOW_SIZE)
+
+  const shiftFn =
+    direction === 'forward' ? shiftWindowForwardUtil : shiftWindowBackwardUtil
+  const newRange = shiftFn(range, totalChildren, BUFFER_SIZE, WINDOW_SIZE)
+
+  if (newRange) {
+    parentWindowRanges.value[node.key] = newRange
+  }
+
+  // Recursively process children in the active window (after shift)
+  const activeRange = newRange ?? range
+  for (
+    let i = activeRange.start;
+    i < activeRange.end && i < node.children.length;
+    i++
+  ) {
+    shiftNodeWindow(node.children[i], direction)
+  }
+}
+
+// Shift all windows in given direction
+const shiftWindows = (direction: ShiftDirection) => {
+  for (const parent of renderedRoot.value.children || []) {
+    shiftNodeWindow(parent, direction)
+  }
+}
+
+// Convenience functions for forward/backward
+const shiftWindowsForward = () => shiftWindows('forward')
+const shiftWindowsBackward = () => shiftWindows('backward')
+
 const renderedRoot = computed<RenderedTreeExplorerNode>(() => {
-  const renderedRoot = fillNodeInfo(props.root)
-  return newFolderNode.value
-    ? combineTrees(renderedRoot, newFolderNode.value)
-    : renderedRoot
+  const root = fillNodeInfo(props.root)
+  return newFolderNode.value ? combineTrees(root, newFolderNode.value) : root
 })
-const getTreeNodeIcon = (node: TreeExplorerNode) => {
-  if (node.getIcon) {
-    const icon = node.getIcon()
-    if (icon) {
-      return icon
+
+// Build a lookup map for O(1) node access instead of O(n) tree traversal
+const nodeKeyMap = computed<Record<string, RenderedTreeExplorerNode>>(() => {
+  const map: Record<string, RenderedTreeExplorerNode> = {}
+  const buildMap = (node: RenderedTreeExplorerNode) => {
+    map[node.key] = node
+    if (node.children) {
+      for (const child of node.children) {
+        buildMap(child)
+      }
     }
-  } else if (node.icon) {
-    return node.icon
   }
-  // node.icon is undefined
-  if (node.leaf) {
-    return 'pi pi-file'
+  buildMap(renderedRoot.value)
+  return map
+})
+
+// Final tree to display with sliding window applied
+const displayRoot = computed<RenderedTreeExplorerNode>(() => ({
+  ...renderedRoot.value,
+  children: (renderedRoot.value.children || []).map((node) =>
+    applyWindowUtil(node, parentWindowRanges.value, WINDOW_SIZE)
+  )
+}))
+
+// Get spacer heights for a node's children container
+const getNodeChildrenStyle = (node: RenderedTreeExplorerNode | undefined) => {
+  if (!node?.children || node.leaf) {
+    return { class: 'virtual-node-children' }
   }
+
+  // Use lookup map for O(1) access instead of O(n) tree traversal
+  const originalNode = nodeKeyMap.value[node.key]
+  if (!originalNode?.children) {
+    return { class: 'virtual-node-children' }
+  }
+
+  const totalChildren = originalNode.children.length
+  const range =
+    parentWindowRanges.value[node.key] ??
+    createInitialWindowRange(totalChildren, WINDOW_SIZE)
+
+  const { topSpacer, bottomSpacer } = calculateSpacerHeights(
+    totalChildren,
+    range,
+    NODE_HEIGHT
+  )
+
+  return {
+    class: 'virtual-node-children',
+    style: {
+      '--top-spacer': `${topSpacer}px`,
+      '--bottom-spacer': `${bottomSpacer}px`
+    }
+  }
+}
+const getTreeNodeIcon = (node: TreeExplorerNode): string => {
+  if (node.getIcon) {
+    const icon = node.getIcon()
+    if (icon) return icon
+  }
+  if (node.icon) return node.icon
+
+  if (node.leaf) return 'pi pi-file'
+
   const isExpanded = expandedKeys.value?.[node.key] ?? false
   return isExpanded ? 'pi pi-folder-open' : 'pi pi-folder'
 }
+
 const fillNodeInfo = (node: TreeExplorerNode): RenderedTreeExplorerNode => {
   const children = node.children?.map(fillNodeInfo) ?? []
   const totalLeaves = node.leaf
@@ -117,37 +390,43 @@ const fillNodeInfo = (node: TreeExplorerNode): RenderedTreeExplorerNode => {
     children,
     type: node.leaf ? 'node' : 'folder',
     totalLeaves,
-    badgeText: node.getBadgeText ? node.getBadgeText() : undefined,
+    badgeText: node.getBadgeText?.() ?? undefined,
     isEditingLabel: node.key === renameEditingNode.value?.key
   }
 }
+const errorHandling = useErrorHandling()
+
 const onNodeContentClick = async (
   e: MouseEvent,
   node: RenderedTreeExplorerNode
-) => {
+): Promise<void> => {
   if (!storeSelectionKeys) {
     selectionKeys.value = {}
   }
   if (node.handleClick) {
-    await node.handleClick(e)
+    await errorHandling.wrapWithErrorHandlingAsync(
+      () => node.handleClick?.(e),
+      node.handleError
+    )()
   }
   emit('nodeClick', node, e)
 }
 const menu = ref<InstanceType<typeof ContextMenu> | null>(null)
 const menuTargetNode = ref<RenderedTreeExplorerNode | null>(null)
+const renameEditingNode = ref<RenderedTreeExplorerNode | null>(null)
+
 const extraMenuItems = computed(() => {
-  return menuTargetNode.value?.contextMenuItems
-    ? typeof menuTargetNode.value.contextMenuItems === 'function'
-      ? menuTargetNode.value.contextMenuItems(menuTargetNode.value)
-      : menuTargetNode.value.contextMenuItems
-    : []
+  const contextMenuItems = menuTargetNode.value?.contextMenuItems
+  if (!contextMenuItems) return []
+  return typeof contextMenuItems === 'function'
+    ? contextMenuItems(menuTargetNode.value!)
+    : contextMenuItems
 })
-const renameEditingNode = ref<RenderedTreeExplorerNode | null>(null)
-const errorHandling = useErrorHandling()
+
 const handleNodeLabelEdit = async (
   node: RenderedTreeExplorerNode,
   newName: string
-) => {
+): Promise<void> => {
   await errorHandling.wrapWithErrorHandlingAsync(
     async () => {
       if (node.key === newFolderNode.value?.key) {
@@ -162,6 +441,7 @@ const handleNodeLabelEdit = async (
     }
   )()
 }
+
 provide(InjectKeyHandleEditLabelFunction, handleNodeLabelEdit)
 
 const { t } = useI18n()
@@ -210,7 +490,7 @@ const menuItems = computed<MenuItem[]>(() =>
 const handleContextMenu = (e: MouseEvent, node: RenderedTreeExplorerNode) => {
   menuTargetNode.value = node
   emit('contextMenu', node, e)
-  if (menuItems.value.filter((item) => item.visible).length > 0) {
+  if (menuItems.value.some((item) => item.visible)) {
     menu.value?.show(e)
   }
 }
@@ -218,10 +498,12 @@ const handleContextMenu = (e: MouseEvent, node: RenderedTreeExplorerNode) => {
 const wrapCommandWithErrorHandler = (
   command: (event: MenuItemCommandEvent) => void,
   { isAsync = false }: { isAsync: boolean }
-) => {
+):
+  | ((event: MenuItemCommandEvent) => void)
+  | ((event: MenuItemCommandEvent) => Promise<void>) => {
   return isAsync
     ? errorHandling.wrapWithErrorHandlingAsync(
-        command as (...args: any[]) => Promise<any>,
+        command as (event: MenuItemCommandEvent) => Promise<void>,
         menuTargetNode.value?.handleError
       )
     : errorHandling.wrapWithErrorHandling(
@@ -236,7 +518,7 @@ defineExpose({
    * @param targetNodeKey - The key of the node where the folder will be added under
    */
   addFolderCommand: (targetNodeKey: string) => {
-    const targetNode = findNodeByKey(renderedRoot.value, targetNodeKey)
+    const targetNode = nodeKeyMap.value[targetNodeKey]
     if (targetNode) {
       addFolderCommand(targetNode)
     }
@@ -253,6 +535,19 @@ defineExpose({
   flex-grow: 1;
 }
 
+/* Virtual scrolling spacers using CSS pseudo-elements (only for ul) */
+:deep(ul.virtual-node-children)::before {
+  content: '';
+  display: block;
+  height: var(--top-spacer, 0);
+}
+
+:deep(ul.virtual-node-children)::after {
+  content: '';
+  display: block;
+  height: var(--bottom-spacer, 0);
+}
+
 /*
  * The following styles are necessary to avoid layout shift when dragging nodes over folders.
  * By setting the position to relative on the parent and using an absolutely positioned pseudo-element,
diff --git a/src/utils/__tests__/virtualListUtils.test.ts b/src/utils/__tests__/virtualListUtils.test.ts
new file mode 100644
index 0000000000..af451c40bf
--- /dev/null
+++ b/src/utils/__tests__/virtualListUtils.test.ts
@@ -0,0 +1,221 @@
+import { describe, expect, it } from 'vitest'
+
+import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
+
+import type { WindowRange } from '../virtualListUtils'
+import {
+  applyWindow,
+  calculateScrollPercentage,
+  calculateSpacerHeights,
+  createInitialWindowRange,
+  shiftWindowBackward,
+  shiftWindowForward
+} from '../virtualListUtils'
+
+describe('virtualListUtils', () => {
+  describe('createInitialWindowRange', () => {
+    it('creates range starting from 0', () => {
+      const range = createInitialWindowRange(100, 60)
+      expect(range).toEqual({ start: 0, end: 60 })
+    })
+
+    it('caps end at totalChildren when less than windowSize', () => {
+      const range = createInitialWindowRange(30, 60)
+      expect(range).toEqual({ start: 0, end: 30 })
+    })
+
+    it('handles zero children', () => {
+      const range = createInitialWindowRange(0, 60)
+      expect(range).toEqual({ start: 0, end: 0 })
+    })
+  })
+
+  describe('shiftWindowForward', () => {
+    it('shifts window forward by buffer size', () => {
+      const currentRange: WindowRange = { start: 0, end: 60 }
+      const result = shiftWindowForward(currentRange, 100, 20, 60)
+      expect(result).toEqual({ start: 20, end: 80 })
+    })
+
+    it('returns null when already at end', () => {
+      const currentRange: WindowRange = { start: 40, end: 100 }
+      const result = shiftWindowForward(currentRange, 100, 20, 60)
+      expect(result).toBeNull()
+    })
+
+    it('caps end at totalChildren', () => {
+      const currentRange: WindowRange = { start: 30, end: 90 }
+      const result = shiftWindowForward(currentRange, 100, 20, 60)
+      expect(result).toEqual({ start: 40, end: 100 })
+    })
+
+    it('adjusts start to maintain window size when near end', () => {
+      const currentRange: WindowRange = { start: 20, end: 80 }
+      const result = shiftWindowForward(currentRange, 95, 20, 60)
+      expect(result).toEqual({ start: 35, end: 95 })
+    })
+  })
+
+  describe('shiftWindowBackward', () => {
+    it('shifts window backward by buffer size', () => {
+      const currentRange: WindowRange = { start: 40, end: 100 }
+      const result = shiftWindowBackward(currentRange, 100, 20, 60)
+      expect(result).toEqual({ start: 20, end: 80 })
+    })
+
+    it('returns null when already at start', () => {
+      const currentRange: WindowRange = { start: 0, end: 60 }
+      const result = shiftWindowBackward(currentRange, 100, 20, 60)
+      expect(result).toBeNull()
+    })
+
+    it('caps start at 0', () => {
+      const currentRange: WindowRange = { start: 10, end: 70 }
+      const result = shiftWindowBackward(currentRange, 100, 20, 60)
+      expect(result).toEqual({ start: 0, end: 60 })
+    })
+
+    it('caps end at totalChildren when window would exceed', () => {
+      const currentRange: WindowRange = { start: 20, end: 50 }
+      const result = shiftWindowBackward(currentRange, 50, 20, 60)
+      expect(result).toEqual({ start: 0, end: 50 })
+    })
+  })
+
+  describe('calculateSpacerHeights', () => {
+    it('calculates correct spacer heights', () => {
+      const range: WindowRange = { start: 20, end: 80 }
+      const result = calculateSpacerHeights(100, range, 28)
+      expect(result).toEqual({
+        topSpacer: 20 * 28,
+        bottomSpacer: 20 * 28
+      })
+    })
+
+    it('returns zero spacers when window covers all children', () => {
+      const range: WindowRange = { start: 0, end: 50 }
+      const result = calculateSpacerHeights(50, range, 28)
+      expect(result).toEqual({
+        topSpacer: 0,
+        bottomSpacer: 0
+      })
+    })
+
+    it('handles window at start', () => {
+      const range: WindowRange = { start: 0, end: 60 }
+      const result = calculateSpacerHeights(100, range, 28)
+      expect(result).toEqual({
+        topSpacer: 0,
+        bottomSpacer: 40 * 28
+      })
+    })
+
+    it('handles window at end', () => {
+      const range: WindowRange = { start: 40, end: 100 }
+      const result = calculateSpacerHeights(100, range, 28)
+      expect(result).toEqual({
+        topSpacer: 40 * 28,
+        bottomSpacer: 0
+      })
+    })
+  })
+
+  describe('calculateScrollPercentage', () => {
+    it('calculates percentage correctly', () => {
+      const result = calculateScrollPercentage(500, 2000, 400, 0, 0)
+      expect(result).toBeCloseTo(0.45)
+    })
+
+    it('adjusts for top spacer height', () => {
+      const result = calculateScrollPercentage(600, 2000, 400, 200, 200)
+      // realContentHeight = 2000 - 200 - 200 = 1600
+      // adjustedScrollTop = max(0, 600 - 200) = 400
+      // percentage = (400 + 400) / 1600 = 0.5
+      expect(result).toBeCloseTo(0.5)
+    })
+
+    it('returns 1 when realContentHeight is 0', () => {
+      const result = calculateScrollPercentage(0, 100, 50, 50, 50)
+      expect(result).toBe(1)
+    })
+
+    it('handles scrollTop less than topSpacerHeight', () => {
+      const result = calculateScrollPercentage(100, 2000, 400, 200, 200)
+      // adjustedScrollTop = max(0, 100 - 200) = 0
+      // realContentHeight = 1600
+      // percentage = (0 + 400) / 1600 = 0.25
+      expect(result).toBeCloseTo(0.25)
+    })
+  })
+
+  describe('applyWindow', () => {
+    const createMockNode = (
+      key: string,
+      children?: RenderedTreeExplorerNode[]
+    ): RenderedTreeExplorerNode => ({
+      key,
+      label: `Node ${key}`,
+      leaf: !children,
+      children,
+      totalLeaves: children ? children.length : 1,
+      icon: 'pi pi-file',
+      type: children ? 'folder' : 'node'
+    })
+
+    it('returns leaf node unchanged', () => {
+      const leafNode = createMockNode('leaf')
+      const result = applyWindow(leafNode, {}, 60)
+      expect(result).toEqual(leafNode)
+    })
+
+    it('returns node with empty children unchanged', () => {
+      const emptyFolderNode = createMockNode('folder', [])
+      const result = applyWindow(emptyFolderNode, {}, 60)
+      expect(result).toEqual(emptyFolderNode)
+    })
+
+    it('applies default window when no range specified', () => {
+      const children = Array.from({ length: 100 }, (_, i) =>
+        createMockNode(`child-${i}`)
+      )
+      const parentNode = createMockNode('parent', children)
+      const result = applyWindow(parentNode, {}, 60)
+      expect(result.children).toHaveLength(60)
+      expect(result.children?.[0].key).toBe('child-0')
+      expect(result.children?.[59].key).toBe('child-59')
+    })
+
+    it('applies specified window range', () => {
+      const children = Array.from({ length: 100 }, (_, i) =>
+        createMockNode(`child-${i}`)
+      )
+      const parentNode = createMockNode('parent', children)
+      const windowRanges = { parent: { start: 20, end: 80 } }
+      const result = applyWindow(parentNode, windowRanges, 60)
+      expect(result.children).toHaveLength(60)
+      expect(result.children?.[0].key).toBe('child-20')
+      expect(result.children?.[59].key).toBe('child-79')
+    })
+
+    it('applies window recursively to nested children', () => {
+      const grandchildren = Array.from({ length: 100 }, (_, i) =>
+        createMockNode(`grandchild-${i}`)
+      )
+      const child = createMockNode('child', grandchildren)
+      const parentNode = createMockNode('parent', [child])
+      const windowRanges = { child: { start: 10, end: 30 } }
+      const result = applyWindow(parentNode, windowRanges, 60)
+      expect(result.children?.[0].children).toHaveLength(20)
+      expect(result.children?.[0].children?.[0].key).toBe('grandchild-10')
+    })
+
+    it('handles window larger than children count', () => {
+      const children = Array.from({ length: 30 }, (_, i) =>
+        createMockNode(`child-${i}`)
+      )
+      const parentNode = createMockNode('parent', children)
+      const result = applyWindow(parentNode, {}, 60)
+      expect(result.children).toHaveLength(30)
+    })
+  })
+})
diff --git a/src/utils/treeUtil.ts b/src/utils/treeUtil.ts
index 21f1e45d67..74d27c32d7 100644
--- a/src/utils/treeUtil.ts
+++ b/src/utils/treeUtil.ts
@@ -105,10 +105,7 @@ export function sortedTree(
   return newNode
 }
 
-export const findNodeByKey = <T extends TreeNode>(
-  root: T,
-  key: string
-): T | null => {
+const findNodeByKey = <T extends TreeNode>(root: T, key: string): T | null => {
   if (root.key === key) {
     return root
   }
diff --git a/src/utils/virtualListUtils.ts b/src/utils/virtualListUtils.ts
new file mode 100644
index 0000000000..8686d559cd
--- /dev/null
+++ b/src/utils/virtualListUtils.ts
@@ -0,0 +1,136 @@
+import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
+
+export interface WindowRange {
+  start: number
+  end: number
+}
+
+/**
+ * Apply a sliding window to limit visible children of a node
+ * @param node - The node to apply the window to
+ * @param windowRanges - Map of node keys to their window ranges
+ * @param windowSize - Maximum number of items in the window
+ * @returns The node with windowed children
+ */
+export const applyWindow = (
+  node: RenderedTreeExplorerNode,
+  windowRanges: Record<string, WindowRange>,
+  windowSize: number
+): RenderedTreeExplorerNode => {
+  if (!node.children || node.leaf || node.children.length === 0) {
+    return node
+  }
+
+  const totalChildren = node.children.length
+  const range = windowRanges[node.key] ?? {
+    start: 0,
+    end: Math.min(windowSize, totalChildren)
+  }
+
+  // Recursively apply window to children
+  const windowedChildren = node.children
+    .slice(range.start, range.end)
+    .map((child) => applyWindow(child, windowRanges, windowSize))
+
+  return {
+    ...node,
+    children: windowedChildren
+  }
+}
+
+/**
+ * Shift window forward (load more at end)
+ * @param currentRange - Current window range
+ * @param totalChildren - Total number of children
+ * @param bufferSize - Number of items to shift
+ * @param windowSize - Maximum window size
+ * @returns New window range, or null if no shift needed
+ */
+export const shiftWindowForward = (
+  currentRange: WindowRange,
+  totalChildren: number,
+  bufferSize: number,
+  windowSize: number
+): WindowRange | null => {
+  if (currentRange.end >= totalChildren) {
+    return null
+  }
+  const newEnd = Math.min(currentRange.end + bufferSize, totalChildren)
+  const newStart = Math.max(0, newEnd - windowSize)
+  return { start: newStart, end: newEnd }
+}
+
+/**
+ * Shift window backward (load more at start)
+ * @param currentRange - Current window range
+ * @param totalChildren - Total number of children
+ * @param bufferSize - Number of items to shift
+ * @param windowSize - Maximum window size
+ * @returns New window range, or null if no shift needed
+ */
+export const shiftWindowBackward = (
+  currentRange: WindowRange,
+  totalChildren: number,
+  bufferSize: number,
+  windowSize: number
+): WindowRange | null => {
+  if (currentRange.start <= 0) {
+    return null
+  }
+  const newStart = Math.max(0, currentRange.start - bufferSize)
+  const newEnd = Math.min(newStart + windowSize, totalChildren)
+  return { start: newStart, end: newEnd }
+}
+
+/**
+ * Calculate spacer heights for a node's children
+ * @param totalChildren - Total number of children
+ * @param range - Current window range
+ * @param nodeHeight - Height of each node in pixels
+ * @returns Top and bottom spacer heights
+ */
+export const calculateSpacerHeights = (
+  totalChildren: number,
+  range: WindowRange,
+  nodeHeight: number
+): { topSpacer: number; bottomSpacer: number } => {
+  const topSpacer = range.start * nodeHeight
+  const bottomSpacer = Math.max(0, totalChildren - range.end) * nodeHeight
+  return { topSpacer, bottomSpacer }
+}
+
+/**
+ * Create initial window range for a node
+ * @param totalChildren - Total number of children
+ * @param windowSize - Maximum window size
+ * @returns Initial window range starting from 0
+ */
+export const createInitialWindowRange = (
+  totalChildren: number,
+  windowSize: number
+): WindowRange => ({
+  start: 0,
+  end: Math.min(windowSize, totalChildren)
+})
+
+/**
+ * Calculate scroll percentage adjusted for spacer heights
+ * @param scrollTop - Current scroll position
+ * @param scrollHeight - Total scrollable height
+ * @param clientHeight - Visible height
+ * @param topSpacerHeight - Combined top spacer height
+ * @param bottomSpacerHeight - Combined bottom spacer height
+ * @returns Scroll percentage between 0 and 1
+ */
+export const calculateScrollPercentage = (
+  scrollTop: number,
+  scrollHeight: number,
+  clientHeight: number,
+  topSpacerHeight: number,
+  bottomSpacerHeight: number
+): number => {
+  const realContentHeight = scrollHeight - topSpacerHeight - bottomSpacerHeight
+  if (realContentHeight <= 0) return 1
+  const adjustedScrollTop = Math.max(0, scrollTop - topSpacerHeight)
+  return (adjustedScrollTop + clientHeight) / realContentHeight
+}