mirror of
https://github.com/got-feedBack/feedBack.git
synced 2026-07-23 05:11:34 +00:00
c7aa5a10b0
The virtualized v3 Songs grid rebuilt its entire visible window (grid.innerHTML = _renderCardsRange(...) + a full wireCards pass) every time it slid by one row. Each row-boundary crossing was therefore a heavy synchronous frame — reparse ~60 cards, re-attach hundreds of listeners, reflow — that stalled the main thread and buffered held-arrow key-repeats, flushing them in a burst. Testers saw the library "go super fast for a second then slow down," skipping "every so many scrolls," up or down, at the same spots each time. It hitched scrolling back up over already-loaded songs too, because the cost was DOM teardown, not fetching. renderWindow() now reconciles the window in place: it reuses the card nodes that stay on-screen and builds only the row that enters/leaves (~6 nodes per slide instead of ~60). Nodes are keyed by absolute index (data-idx) with a real-vs-skeleton + select-mode signature (data-sig) so hole-fills after a page fetch and select-mode toggles still rebuild exactly the nodes that changed. wireCards()'s existing data-wired guard then wires only the freshly-built nodes, so per-slide listener churn drops with it. Everything keyed off data-fn (favorites, ⋮ menu, right-click, selection, accuracy badges, A–Z rail) is unaffected. Follow-up to the stage-2 virtualized grid (#636 item 3). Frontend-only. Tests: tests/js/v3_songs_window_recycle.test.js — window stays [start,end) contiguous and in-window node identity is reused across a down-then-up scroll; select-mode toggle and a rail-seek jump rebuild correctly. Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Co-authored-by: byrongamatos <xasiklas@gmail.com> |
||
|---|---|---|
| .. | ||
| avatars | ||
| brand | ||
| pedals | ||
| audio-routing.js | ||
| badges.js | ||
| brand.js | ||
| card-actions-core.js | ||
| dashboard.js | ||
| feedbarcade.js | ||
| image-picker.js | ||
| index.html | ||
| interface-size-nudge.js | ||
| interface-size-ui.js | ||
| lessons.js | ||
| live-guitar-tone-source.js | ||
| live-performance-hud.js | ||
| manifest.json | ||
| match-review.js | ||
| notifications.js | ||
| onboarding-tour.js | ||
| overlay-active.png | ||
| overlay-inactive.png | ||
| pedal-cables.js | ||
| pedal-default.svg | ||
| pedal-frame.svg | ||
| player-chrome.js | ||
| playlists.js | ||
| plugins-page.js | ||
| profile.js | ||
| progress.js | ||
| progression-core.js | ||
| scoreboard-pref.js | ||
| settings.js | ||
| shell.js | ||
| shop.js | ||
| songs.js | ||
| stats-recorder.js | ||
| theme-core.js | ||
| tuner-core.js | ||
| v3.css | ||
| venue-instrument-pov.js | ||
| venue-mood-fx.js | ||
| venue-scene-3d.js | ||
| venue-viz.js | ||
