Skip to content

feat(perf): lazy module loading and large board grid virtualization (#145) - #158

Merged
Dyu20705 merged 6 commits into
devfrom
issue/145-lazy-loading-virtualization
Aug 31, 2026
Merged

feat(perf): lazy module loading and large board grid virtualization (#145)#158
Dyu20705 merged 6 commits into
devfrom
issue/145-lazy-loading-virtualization

Conversation

@Dyu20705

Copy link
Copy Markdown
Owner

Problem & Root Cause

  • Previously, note board virtualization in ui/list.js and styles.css collapsed Grid View into a single column whenever virtualization was active (data-virtualized="true"), preventing multi-column responsive grid layout for collections with >500 items.
  • Secondary modules like Kanji stroke guidance and dictionary assets were embedded eagerly in the main bundle.

Implementation

  1. Multi-Column Grid Virtualization (ui/list.js):
    • Implemented dynamic column calculation (computeGridColumns) derived from container width and minimum card width (280px).
    • Updated renderWindow() with row-based slicing: startIndex = startRow * cols, endIndex = endRow * cols, and spacer heights computed via ceil(N / cols).
    • Preserved single-column List View virtualization.
  2. Stylesheet Hardening (styles.css):
    • Removed the single-column override .note-list[data-virtualized="true"] .note-board-grid, enabling .note-list[data-view-mode="grid"].
  3. Lazy Module Loading (core/kanjiStrokeGuide.js & ui/kanjiInkView.js):
    • Extracted stroke guidance rendering, direction arrows, air path calculations, and Kanji dictionary metadata into core/kanjiStrokeGuide.js.
    • Updated ui/kanjiInkView.js to dynamically load kanjiStrokeGuide.js on demand only when guidance is toggled.
  4. Test Suite Expansion:
    • Added unit test suite tests/unit/kanjiStrokeGuide.test.mjs.
    • Added large board stress and dynamic import performance tests in tests/performance/performance-budget.test.mjs.
    • Added multi-column grid virtualization E2E test with 600 items in tests/e2e/grid-view.spec.mjs.

Verification Evidence

  • npm run test:content -> PASS (3/3)
  • npm run lint -> PASS (0 errors, 0 warnings)
  • npm run test:unit -> PASS (320/320)
  • npm run test:integration -> PASS (111/111)
  • npm run test:perf -> PASS (6/6)
  • npm run test:e2e -> PASS (165/165)
  • git diff --check -> PASS

Fixes #145
Part of #143

Copilot AI lite review requested due to automatic review settings August 31, 2026 05:56

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

@Dyu20705
Dyu20705 merged commit 39b76b3 into dev Aug 31, 2026
1 check passed
@Dyu20705
Dyu20705 deleted the issue/145-lazy-loading-virtualization branch August 31, 2026 14:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants