Skip to content

Commit ee4b80c

Browse files
authored
perf: implement virtualization and search debouncing for EntityBrowser (#121)
* refactor: simplify panel.ts to minimal web component - Remove unused panel and route setters - Compact code formatting while maintaining readability - Keep shadow DOM for CSS isolation (required for Home Assistant) - Maintain CSS loading for both shadow DOM and document head (for portals) * perf: implement virtualization for EntityBrowser to fix performance with large entity lists - Add @tanstack/react-virtual for list virtualization - Implement virtual scrolling in EntitiesBrowserTab component - Add React.memo to EntityItem components - Create performance test route at /test/performance - Flatten data structure for efficient rendering - Expected 70-90% performance improvement with 1500+ entities * perf: add search debouncing and fix virtual list item heights - Implement 300ms debounce for search input to reduce recalculations - Fix overlapping virtual list items by increasing heights: - Entity items: 60px → 72px with proper padding - Headers: 40px → 48px with fixed height - Add proper spacing between entity cards (mb-2) - Increase card padding from p-2 to p-3 for better touch targets - Add tmp/ to .gitignore to exclude temporary files * fix: update EntityBrowser tests for virtualization - Mock @tanstack/react-virtual to render all items in tests - Update test expectations to work with virtualized list - Add dynamic virtualizer mock that calculates items based on count - Adjust search test for debounced input - Format files with Prettier * style: fix prettier formatting in EntityBrowser test * fix: resolve TypeScript errors in EntityBrowser test - Remove unused mockVirtualItems variable - Add proper types to virtualizer mock function parameters - Fix ESLint no-explicit-any errors * fix: add explicit type for items array in virtualizer mock
1 parent 025f191 commit ee4b80c

10 files changed

Lines changed: 428 additions & 145 deletions

.gitignore

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,4 +51,7 @@ lerna-debug.log*
5151
.env.sentry-build-plugin
5252

5353
# Claude settings
54-
.claude/settings.local.json
54+
.claude/settings.local.json
55+
56+
# Temporary files
57+
tmp/

package-lock.json

Lines changed: 28 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
"@tanstack/react-router-devtools": "^1.122.0",
3232
"@tanstack/react-start": "^1.122.1",
3333
"@tanstack/react-store": "^0.7.1",
34+
"@tanstack/react-virtual": "^3.13.12",
3435
"@types/js-yaml": "^4.0.9",
3536
"home-assistant-js-websocket": "^9.5.0",
3637
"js-yaml": "^4.1.0",

0 commit comments

Comments
 (0)