Virtualize long taxonomy lists in the admin editor
Virtualize long taxonomy lists in the admin editor
#60 in Riparion/riparion-cms — merged 2026-06-04
What
The Admin > Taxonomy Tags column rendered every row at full page height with always-on Edit/Delete buttons. The list grows with the blog (47 tags in dev), so it became a wall of rows the admin had to scroll the whole page past — everything surfaced at once.
This windows long lists into a bounded, virtualized scroll panel so only the rows near the viewport are in the DOM and the rest reveal on scroll.
How
- Install the catalog
virtual_listcomponent (dx components add virtual_list). - In
TaxonomyEditor, branch the loaded list on length:<= VIRTUALIZE_THRESHOLD(24) → plain rendering, unchanged (Categories, small tag sets — no odd fixed-height box around a handful of rows).- above it →
VirtualListin amax-h-[28rem]bordered scroll panel.
- Extract the per-row markup into a shared
TaxonomyRowcomponent so both branches render identically (inline rename, delete-with-confirm, error surfacing all preserved). - In the narrower panel the rename input + buttons don't fit on one line, so in edit mode Save/Cancel stack below the field; Cancel matches the Edit button's outline style.
Presentation-only — no server, DB, or model changes.
Notes
dx components addclobberedassets/dx-components-theme.csswith the stock catalog default; reverted so the app theme bridge stays intact (that file is not part of this PR).- The generated component uses a plain class (not
css_module), so noLocalStylesheetspin is needed.
Verification
cargo fmt --checkclean;clippy --features server,sqlite --all-targets -D warningsclean; web/wasm32 type-checks clean.- Visually confirmed in the running app: Categories render plainly, Tags virtualize into the bounded scroll panel, scrolling reveals further rows, and inline edit (stacked Save/Cancel) works.
🤖 Generated with Claude Code
Last updated 2026-06-05
Links to this note
Credits
Merged pull requests, newest first.