Skip to content

WIP feat(react-native-ui-lite): virtualize tree with LegendList for performance#834

Draft
dannyhw wants to merge 34 commits intonextfrom
feat/lite-ui-virtualized-tree
Draft

WIP feat(react-native-ui-lite): virtualize tree with LegendList for performance#834
dannyhw wants to merge 34 commits intonextfrom
feat/lite-ui-virtualized-tree

Conversation

@dannyhw
Copy link
Member

@dannyhw dannyhw commented Jan 15, 2026

Summary

  • introduce LegendList for virtualized scrolling, significantly improving performance for large story lists
  • Optimize Search component with useDeferredValue to prevent blocking during typing
  • Refactor SelectedNodeProvider to use legend list and enable better scroll to that expands all ancestors so that item can be scrolled to correctly
  • replace fuse with microfuzz
  • change search bar to be sticky in storylist
  • fix some colors on dark mode

Changes

Performance

  • Add @legendapp/list for efficient list virtualization
  • replace fuse with @nozbe/microfuzz
  • Use useDeferredValue for dataset and query to prevent UI blocking

Test plan

  • Verify tree scrolling works smoothly on both mobile and desktop
  • Test scroll-to-selected works when opening mobile drawer
  • Verify search functionality and performance with large datasets
  • Check scrollbar positioning on desktop (should be at edge, not inside padding)
  • Test safe area handling on devices with notches/home indicators

dannyhw and others added 8 commits January 15, 2026 14:32
…rmance

- Replace direct item rendering with LegendList for virtualized scrolling
- Add @legendapp/list dependency for efficient list virtualization
- Optimize Search component with useDeferredValue and memoized Fuse instance
- Refactor SelectedNodeProvider to use callback-based scroll registration
- Fix flex layouts throughout sidebar for proper height filling
- Remove ScrollView wrappers in favor of LegendList's built-in scrolling
- Simplify Swap component to use conditional rendering instead of display:none
- Move padding from containers to content for better scrollbar positioning
- Add safe area insets support for bottom padding

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add paddingHorizontal to ResultsList for consistent spacing
- Center and style NoResults text with proper muted color

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Extract inline style objects to module-level constants and memoize
styles that depend on theme properties to prevent unnecessary
re-renders. This improves performance by avoiding object recreation
on each render.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@dannyhw dannyhw changed the title feat(react-native-ui-lite): virtualize tree with LegendList for performance WIP feat(react-native-ui-lite): virtualize tree with LegendList for performance Jan 15, 2026
@dannyhw dannyhw marked this pull request as draft January 15, 2026 22:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant