Estimate: 45m
Finding #57: the Tree loads the WHOLE forest at once. Jira's hierarchy grids (Structure / Advanced Roadmaps) don't paginate a tree — they lazy-load children on expand and virtualize rows. This designs that, PLUS the sortable tree-grid column headers (2.5.7 deferred Tree sorting; it's natural once children are lazy-loaded — each children-fetch carries ORDER BY <sort>, so siblings sort WITHIN their parent, hierarchy preserved). Specify:
- Sortable headers — each tree-grid column header is a sort button with the asc / desc / unsorted states + a sort-arrow indicator (the same shape the List shipped, applied to the
role="treegrid" header). Sorting re-orders siblings within every parent.
- Lazy-expand — a collapsed parent shows it has children (the chevron) without loading them; expanding fetches that node's children (a spinner/placeholder row on the expanding node), and a "Load more children" affordance when a parent has more children than the per-node page.
- Virtualization — invisible to the eye (only viewport rows render); note it in design-notes, no distinct visual.
Output: design/work-items/tree-scale.mock.html (or extend the tree design) + design-notes.md. --el-* only; AA-safe (sort not by colour alone — the arrow + aria-sort carry it).
Acceptance criteria
- The mockup draws sortable tree-grid headers (asc/desc/unsorted + arrow), the lazy-expand loading row + "Load more children" affordance, and documents virtualization + the keyboard/
aria-sort model; design-notes.md states sorting re-orders siblings within parents and names the per-node page size.
- Mirrors Jira's hierarchy-grid lazy-load + virtualization; sort indicated by arrow +
aria-sort, not colour alone (finding #35); --el-* only.
Context refs
design/work-items/tree.png + the shipped components/ui/TreeTable (2.5.2) — the surface to extend- The List's shipped sort-header affordance (2.5.7/2.5.8) — the indicator to mirror onto the treegrid
- Jira Structure / Advanced Roadmaps as the lazy-load + virtualization mirror