fix: virtualize tree children to fix UI lag with many nodes (Fixes #47) by 7vignesh · Pull Request #51 · tsperf/tracer

7vignesh · 2026-04-05T20:09:59Z

🎯 Problem

The Type Complexity Tracer UI was rendering all child nodes at once in the DOM, causing severe UI lag when nodes had thousands of children. This made the extension nearly unusable for large projects like arktype.

Related Issue: Closes #47

✨ Solution

Implemented pagination for child node loading:

Backend now supports limit/offset parameters for fetching children
UI loads 50 children per page by default
Users can click "Load More" button to load additional pages
Shows accurate count: "Load More (50/1000)"

📝 Changes

Backend Changes

src/traceTree.ts: Modified getChildrenById() to accept limit and offset parameters, returns total count
src/handleMessages.ts: Updated message handler to pass pagination parameters to backend
shared/src/messages.ts: Extended childrenById message schema with pagination fields

Frontend Changes

ui/src/appState.ts: Added childrenTotalById map to track per-node children count
ui/components/TreeNode.vue:
- Added pagination state (offset, limit)
- Implemented loadMoreChildren() function
- Added "Load More" button showing count progress

✅ Testing

🔗 Related Issues

Fixes UI lags when there are many child nodes #47

📦 Type of Change

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)

Add limit and offset parameters to support paginated loading of children. Returns total count of children for UI to implement load-more functionality. - limit: number of children to fetch (default 50) - offset: pagination offset (default 0) - total: total number of children available

Prevents loading all children at once for nodes with thousands of kids. Returns paginated results with total count. - Accepts limit and offset parameters - Returns children array and total count - Fixes issue tsperf#47: UI lags when there are many child nodes

Add childrenTotalById map to store total children available. Update message handler to set total count from server response. This enables the UI to show load-more button with accurate count.

Implement paginated child rendering to prevent DOM explosion. Default limit of 50 children per page keeps UI responsive. Changes: - Add offset and limit state (50 children per page) - Request children with pagination parameters - Show 'Load More' button when more children available - Display count (e.g. 'Load More (50/1000)') - Accumulate children as user loads more pages Fixes issue tsperf#47: UI lags when there are many child nodes

7vignesh · 2026-04-05T20:12:17Z

Hey @danielroe 👋 Just opened this PR to fix the UI lag issue (#47) by virtualizing the tree children — would love your feedback on the approach!

I've been exploring the codebase and I'm genuinely interested in contributing more. Happy to take on other open issues if you have any priorities in mind. Open to a discussion anytime!

Copilot

Pull request overview

Adds server-assisted pagination for loading tree children to reduce DOM/rendering load and fix UI lag when nodes have many children (Fixes #47).

Changes:

Backend: extend childrenById to support limit/offset and return total child count.
Frontend: track per-node total child count and add “Load More” pagination UI.
Shared: update message schema to include pagination fields.

Reviewed changes

Copilot reviewed 5 out of 6 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
ui/src/appState.ts	Tracks per-node total child count from `childrenById` responses
ui/components/TreeNode.vue	Adds pagination state + “Load More” control for incremental child loading
src/traceTree.ts	Implements paginated child retrieval and returns `{ children, total }`
src/handleMessages.ts	Wires message handler to pass pagination args and return total
shared/src/messages.ts	Extends `childrenById` schema with `limit`/`offset` and `total`
renovate.json	Formatting-only change (newline/indent alignment)

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-05T20:13:55Z

ui/components/TreeNode.vue

+      <div v-if="totalChildren !== undefined && children.length + offset < totalChildren" class="flex justify-center py-2 pl-8">
+        <button class="px-4 py-1 bg-[var(--vscode-button-background)] text-[var(--vscode-button-foreground)] rounded hover:opacity-80 transition-opacity text-sm" @click="loadMoreChildren">
+          Load More ({{ children.length + offset }}/{{ totalChildren }})


The “Load More” visibility/progress math is incorrect: children.length already represents the number of loaded children (since childrenById appends). Adding offset double-counts and will hide the button early (roughly after half the children) and display wrong progress after the first load-more.

Suggested change

<div v-if="totalChildren !== undefined && children.length + offset < totalChildren" class="flex justify-center py-2 pl-8">

<button class="px-4 py-1 bg-[var(--vscode-button-background)] text-[var(--vscode-button-foreground)] rounded hover:opacity-80 transition-opacity text-sm" @click="loadMoreChildren">

Load More ({{ children.length + offset }}/{{ totalChildren }})

<div v-if="totalChildren !== undefined && children.length < totalChildren" class="flex justify-center py-2 pl-8">

<button class="px-4 py-1 bg-[var(--vscode-button-background)] text-[var(--vscode-button-foreground)] rounded hover:opacity-80 transition-opacity text-sm" @click="loadMoreChildren">

Load More ({{ children.length }}/{{ totalChildren }})

Copilot · 2026-04-05T20:13:56Z

ui/components/TreeNode.vue

+// Pagination state
+const offset = ref(0)
+const limit = 50
+
 function fetchChildren() {
  if (children.value.length === 0)
-    sendMessage('childrenById', { id: props.tree.id })
+    sendMessage('childrenById', { id: props.tree.id, limit, offset: offset.value })
+}
+
+function loadMoreChildren() {
+  // Load next batch of children
+  const newOffset = offset.value + limit
+  offset.value = newOffset
+  sendMessage('childrenById', { id: props.tree.id, limit, offset: newOffset })


offset is kept as local component state but the actual loaded count is stored globally in childrenById. If this component is ever remounted/reused (e.g., collapse/unmount behavior), offset will reset to 0 while childrenById may already contain items, causing duplicate page fetches. Consider deriving the next offset from children.value.length (or syncing offset from it) instead of incrementing a standalone ref.

Copilot · 2026-04-05T20:13:56Z

ui/src/appState.ts

 export const childrenById = shallowReactive(new Map<number, Tree[]>())
+export const childrenTotalById = shallowReactive(new Map<number, number>())
 export const typesById = shallowReactive(new Map<number, TypeLine[]>())


childrenTotalById is introduced but none of the per-id caches (childrenById, typesById, childrenTotalById) are cleared when a new tree is shown or the trace file list is reset. Since node IDs restart from 1 for each new trace (src/traceTree.ts resets id = 0), stale cached children/total can be applied to unrelated nodes in later traces. Clear these maps when handling showTree step start and/or traceFileLoaded with resetFileList.

Copilot · 2026-04-05T20:13:56Z

src/traceTree.ts

+export function getChildrenById(id: number, limit: number = 50, offset: number = 0) {
  const nodes = treeIdNodes.get(id)?.children ?? []
-  const ret: typeof nodes = []
-  nodes.forEach((node) => {
+  const total = nodes.length
+  const paginatedNodes = nodes.slice(offset, offset + limit)
+  const ret: typeof paginatedNodes = []
+  paginatedNodes.forEach((node) => {


limit/offset are used directly to slice the children array without validation. Negative values or very large limits can produce unexpected paging behavior or reintroduce large payloads (UI freeze) if a webview sends a large limit. Clamp limit to a reasonable max and ensure offset >= 0 before slicing.

Copilot · 2026-04-05T20:13:56Z

shared/src/messages.ts

+  limit: z.number().optional().default(50),
+  offset: z.number().optional().default(0),


The message schema accepts any numeric limit/offset. To avoid abuse and accidental UI freezes, constrain these (e.g., non-negative offset, reasonable max limit) at the schema level (zod refinements) and/or in the message handler before calling getChildrenById.

Suggested change

limit: z.number().optional().default(50),

offset: z.number().optional().default(0),

limit: z.number().int().min(0).max(500).optional().default(50),

offset: z.number().int().min(0).optional().default(0),

7vignesh added 5 commits April 6, 2026 01:35

feat(ui/appState): track total children count per node

350b3d9

Add childrenTotalById map to store total children available. Update message handler to set total count from server response. This enables the UI to show load-more button with accurate count.

fix: add missing newline to end of renovate.json

e3e172c

Copilot AI review requested due to automatic review settings April 5, 2026 20:10

7vignesh requested a review from danielroe as a code owner April 5, 2026 20:10

Copilot started reviewing on behalf of 7vignesh April 5, 2026 20:10 View session

Copilot AI reviewed Apr 5, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: virtualize tree children to fix UI lag with many nodes (Fixes #47)#51

fix: virtualize tree children to fix UI lag with many nodes (Fixes #47)#51
7vignesh wants to merge 5 commits intotsperf:mainfrom
7vignesh:fix/virtualize-tree-children

7vignesh commented Apr 5, 2026

Uh oh!

7vignesh commented Apr 5, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 5, 2026

Uh oh!

Copilot AI Apr 5, 2026

Uh oh!

Copilot AI Apr 5, 2026

Uh oh!

Copilot AI Apr 5, 2026

Uh oh!

Copilot AI Apr 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		limit: z.number().optional().default(50),
		offset: z.number().optional().default(0),

Conversation

7vignesh commented Apr 5, 2026

🎯 Problem

✨ Solution

📝 Changes

Backend Changes

Frontend Changes

✅ Testing

🔗 Related Issues

📦 Type of Change

Uh oh!

7vignesh commented Apr 5, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 5, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants