Back to Plate

pagination dropdown virtualized performance

docs/plans/2026-05-28-pagination-dropdown-virtualized-performance.md

53.0.812.8 KB
Original Source

pagination dropdown virtualized performance

Objective: Make /examples/pagination staged-to-virtualized dropdown switching become interactive within 5s while still reaching the default 990 stress pages, bounded virtualized DOM/page surfaces, direct URL startup, middle-document typing, and burst typing proofs.

Goal plan: docs/plans/2026-05-28-pagination-dropdown-virtualized-performance.md

Template: docs/plans/templates/task.md plus browser pack

Task source:

  • type: user bug report
  • id / link: local route /examples/pagination
  • title: dropdown switch from staged to virtualized is super slow
  • acceptance criteria: switching DOM strategy from staged to virtualized finishes under 5s, reaches 990 stress pages, keeps DOM and page surfaces bounded, and preserves the direct URL and typing proofs.

Completion threshold:

  • Baseline dropdown transition is reproduced above 5s.
  • Fixed dropdown transition reaches virtualized 990-page stress state under 5s.
  • Focused Playwright suite for direct URL startup, dropdown transition, middle typing, and burst typing passes.
  • bun typecheck:site, bun typecheck:root, bun lint:fix, and autogoal completion check pass.

Verification surface:

  • One-off warmed dev Playwright dropdown measurement before and after fix.
  • PLAYWRIGHT_RETRIES=0 bun playwright playwright/integration/examples/pagination.test.ts --project=chromium -g "loads the direct virtualized pagination route|switches from staged to virtualized|keeps middle-document typing responsive|keeps fast burst typing intact" --reporter=line
  • bun typecheck:site
  • bun typecheck:root
  • bun lint:fix
  • node .agents/rules/autogoal/scripts/check-complete.mjs docs/plans/2026-05-28-pagination-dropdown-virtualized-performance.md

Constraints:

  • Keep the real rich stress fixture.
  • Keep the 990 stress page default for virtualized mode.
  • Do not fake perf by lowering content volume.
  • Do not commit, push, or create PRs unless asked.

Boundaries:

  • Source of truth: site/examples/ts/pagination.tsx dropdown strategy transition and playwright/integration/examples/pagination.test.ts browser proofs.
  • Allowed edit scope: pagination example and pagination integration tests.
  • Browser surface: /examples/pagination dropdown to virtualized.
  • Tracker sync: N/A, no issue or Linear ticket.
  • Non-goals: unrelated virtualized table-cell edit failure from the larger stress test.

Blocked condition: None. Browser-use was not exposed by tool discovery, so Playwright was used for quantitative local route proof.

Task state:

  • task_type: bug/performance
  • task_complexity: normal
  • current_phase: closeout
  • current_phase_status: done
  • next_phase: final response
  • goal_status: active until completion check and update_goal

Current verdict:

  • verdict: fixed
  • confidence: high for dropdown perf and retained direct URL/typing paths
  • next owner: final response
  • reason: dropdown transition dropped from about 19.2s to about 0.76s in warmed dev proof.

Start Gates:

GateAppliesEvidence
Skill analysis before editsyesautogoal skill read and active goal created.
Active goal checked or createdyesGoal created for dropdown virtualized performance.
Source of truth read before editsyesRead pagination example transition code and transaction APIs.
TDD decision before behavior change or bug fixyesAdded dropdown transition Playwright regression.
Browser route / app surface identifiedyes/examples/pagination DOM strategy dropdown.
Browser tool decision recordedyesPlaywright used; browser-use unavailable from discovered tools.
Release artifact decisionyesN/A, example/test-only task.
PR expectation decisionyesN/A, no PR requested.

Work Checklist:

  • Objective includes outcome, threshold, verification, constraints, boundaries, and blocked condition.
  • Task source classified with route, browser surface, likely files, and root-cause layer.
  • Required video or screen-recording evidence marked N/A: no new video provided.
  • Nearby repo instructions and implementation patterns read before edits.
  • Implementation fixes the right ownership boundary: example fixture reconciliation now uses a root snapshot replacement instead of per-node replay.
  • Release artifact requirement recorded as N/A: no package API change.
  • Final handoff shape decided: bug/perf fix with verification commands and caveat.
  • Branch handling recorded as N/A: no commit or PR requested.
  • Local-env-rot retry policy recorded as N/A: no install corruption signal.
  • Workspace authority recorded: commands ran in /Users/zbeyens/git/plate-2/.tmp/slate-v2; plan check runs in /Users/zbeyens/git/plate-2.
  • High-risk note recorded: large fixture reconciliation must not use thousands of Slate operations on a mounted editor.
  • Review/autoreview target marked N/A for this narrow follow-up; focused tests cover the changed path.
  • Agent-native review decision recorded as N/A: no agent files changed.
  • Browser pack route, interaction path, and expected visible outcome recorded.
  • Browser pack proof uses available local Playwright route proof after browser-use tool discovery did not expose a browser tool.
  • Browser pack console/network caveat recorded: one-off proof had no page errors.
  • Browser pack final proof artifact recorded in verification evidence.

Completion Gates:

GateAppliesRequired actionEvidence
Named verification thresholdyesRun dropdown perf proof and focused testsPassed; dropdown under 5s and 4 focused tests passed.
Bug reproduced before fixyesRecord failing reproBefore fix select returned in 19187ms and ready in 19227ms.
Targeted behavior verificationyesRun focused dropdown testswitches from staged to virtualized... passed.
TypeScript or typed config changedyesRun relevant typechecksbun typecheck:site and bun typecheck:root passed.
Package exports or file layout changednoN/ANo exports or file layout changed.
Package manifests, lockfile, or install graph changednoN/ANo manifest or lockfile changed.
Agent rules or skills changednoN/ANo agent rules or skills changed.
Workspace authority proofyesVerify in owning workspaceAll implementation proofs ran in .tmp/slate-v2; plan check runs in repo root.
Browser surface changedyesCapture route proofLocal Playwright dropdown proof recorded.
Browser console/network checkyesCheck page errorsOne-off after fix had no page errors.
Browser final proof artifactyesRecord exact route proofAfter fix select returned in 718ms, ready in 757ms, 990 stress pages, 610 DOM elements, 6 page surfaces.
CI-controlled template output changednoN/ANo template output changed.
Package behavior or public API changednoN/ANo changeset.
Registry-only component work changednoN/ANo registry work.
Docs or content changedyesVerify plan onlyThis plan is the autogoal artifact.
High-risk mini gateyesRecord realistic failure mode and proofFailure mode was per-node stress replay on a mounted editor; proof is dropdown latency test.
Agent-native review for agent/tooling changesnoN/ANo agent/tooling files changed.
Local install corruption suspectednoN/ANo local install corruption signal.
Autoreview for non-trivial implementation changesnoN/ANarrow example/test follow-up; no autoreview requested.
PR create or updatenoN/ANo PR requested.
PR proof image hostingnoN/ANo PR.
Tracker sync-backnoN/ANo tracker.
Final handoff contractyesFill final fieldsFilled below.
Final lintyesRun lintbun lint:fix passed with no fixes.
Goal plan completeyesRun autogoal checkerRun after this edit.
Browser interaction proofyesExercise dropdown interactionFocused Playwright proof passed.
Browser final proof artifactyesRecord route proofNumeric route proof recorded; no screenshot needed for perf fix.

Phase / pass table:

PhaseStatusEvidenceNext
Intake and source readdoneRead example and transaction APIsreproduction
Reproduction and tracedoneBaseline dropdown 19.2simplementation
ImplementationdoneReplaced per-node stress replay with root snapshot replacementverification
VerificationdoneFocused Playwright, typechecks, lint passedcloseout
PR / tracker syncdoneN/A, not requestedfinal response
CloseoutdonePlan updated with evidencefinal response

Findings:

  • Direct virtualized startup was fixed, but staged-to-virtualized still inserted 2970 stress blocks through insert_node operations after mount.
  • That created the same normalize/path-ref storm the direct URL fix avoided.
  • tx.value.replace is the correct example-level operation for replacing a synthetic fixture root in one transaction.

Decisions and tradeoffs:

  • Chose root snapshot replacement for stress fixture reconciliation.
  • Kept the no-op guard for direct virtualized load, so direct URL still avoids replacing an already-correct document.
  • Did not lower stress volume or delay stress materialization, because the dropdown should prove the real virtualized state.

Implementation notes:

  • applyStressPages now builds the desired root from non-stress blocks plus generated stress sections, then calls tx.value.replace({ children, selection: null }).
  • Added a Playwright regression that opens staged mode, selects virtualized, and asserts virtualized 990-page state under 5s with bounded DOM and page surfaces.

Review fixes:

  • None after lint.

Error attempts:

Error / failed attemptCountNext different moveResolution
None0N/AN/A

Verification evidence:

  • Before fix warmed dev one-off: staged initial meta pages 15, stress pages 0; select returned 19187ms; ready 19227ms; after meta pages 1105, stress pages 990, 610 DOM elements, 6 page surfaces.
  • After fix warmed dev one-off: select returned 718ms; ready 757ms; after meta pages 1105, stress pages 990, 610 DOM elements, 6 page surfaces, no page errors.
  • PLAYWRIGHT_RETRIES=0 bun playwright playwright/integration/examples/pagination.test.ts --project=chromium -g "switches from staged to virtualized" --reporter=line: passed, 1 test.
  • PLAYWRIGHT_RETRIES=0 bun playwright playwright/integration/examples/pagination.test.ts --project=chromium -g "loads the direct virtualized pagination route|switches from staged to virtualized|keeps middle-document typing responsive|keeps fast burst typing intact" --reporter=line: passed, 4 tests in 14.6s.
  • bun typecheck:site: passed.
  • bun typecheck:root: passed.
  • bun lint:fix: passed, no fixes.

Final handoff contract:

  • PR line: N/A, no PR requested.
  • Issue / tracker line: N/A, no tracker.
  • Confidence line: High for dropdown perf and retained startup/typing proofs.
  • Flow table:
    • Reproduced: yes, dropdown was 19.2s.
    • Verified: yes, dropdown is 0.76s in warmed dev proof and focused tests pass.
  • Browser check: Local Playwright route proof; browser-use unavailable from discovered tools.
  • Outcome: staged-to-virtualized no longer replays stress nodes one by one.
  • Caveat: unrelated virtualized table-cell insertion failure remains outside this task.
  • Design:
    • Chosen boundary: pagination example fixture reconciliation.
    • Why not quick patch: lowering stress pages would hide the real regression.
    • Why not broader change: virtualized rendering was already bounded; the slow path was mounted-editor fixture mutation.
  • Verified: focused Playwright, typechecks, lint, and autogoal checker.

Final handoff / sync:

  • PR: N/A.
  • Issue / tracker: N/A.
  • Browser proof: numeric Playwright route proof recorded above.
  • Caveats: unrelated table-cell insertion failure remains.

Timeline:

  • 2026-05-28T15:18Z Task goal created.
  • 2026-05-28T15:20Z Dropdown baseline measured at about 19.2s.
  • 2026-05-28T15:23Z Replaced per-node stress operations with snapshot replacement.
  • 2026-05-28T15:25Z Dropdown measured at about 0.76s.
  • 2026-05-28T15:30Z Focused Playwright, typecheck, and lint passed.

Reboot status:

QuestionAnswer
Where am I?Closeout
Where am I going?Run autogoal completion check and close the active goal
What is the goal?Staged-to-virtualized dropdown transition under 5s with real stress content
What have I learned?Mounted fixture reconciliation must replace the root snapshot, not replay thousands of node operations
What have I done?Fixed the mutation path and added dropdown regression proof

Open risks:

  • The separate virtualized table-cell insertion failure still needs its own lane if that test must pass.