Repository navigation
Virtualize the packet list and hex dump with tanstack virtual - #18
Merged
Merged
Conversation
Both lists hand rolled their own offset tables, scroll math and edge cases. The packet list also carried an off screen probe just to measure a plain row and a gap marked row, plus a font settled flag to remeasure once the shipped faces swapped in. tanstack virtual measures each mounted row for real, so none of that survives: a badge narrowing a row's text or a font swap changing its wrap now correct themselves through the same ResizeObserver the library already needs. Vertical padding on both scroll containers moves from CSS into the virtualizer's own paddingStart and paddingEnd, since a real padding top would shift rows on screen without shifting the offsets the library computes for them. Horizontal padding is unaffected and stays in CSS.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
PacketList.tsxandHexDump.tsx(lib/packetWindow.ts,lib/hexWindow.ts) with@tanstack/react-virtual.RowProbeand its font settled tracking: the library measures each mounted row's real height directly, so a session badge or a font swap changing a row's wrap corrects itself automatically.paddingStart/paddingEnd, since the library's row offsets and the container's native scrollTop need to agree on where row 0 starts. Horizontal padding is untouched.packetWindow.tsand its tests outright; trimshexWindow.tsdown to the row math still used (rowCountFor,rowForOffset,highlightEdge).Test plan
go test ./...unaffected (no Go changes)npm run typechecknpm test(178 tests)npm run build