Lazy load rows

[kanvgupta]

Summary by CodeRabbit

• New Features

  • Implemented windowed rendering for large lists to improve performance by rendering only viewport-visible items and placeholders for others.
  • Added new opt-in flag allowing users to control full list rendering behavior.

• Tests

  • Updated test scenarios to support windowed rendering validation.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository: euler-xyz/coderabbit/.coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: aad1b315-ee61-488a-904a-ef39035d962b

📥 Commits

Reviewing files that changed from the base of the PR and between 945023a and db17e35.

📒 Files selected for processing (9)

• components/entities/vault/VaultsBorrowList.vue
• components/ui/UiLazyListItem.vue
• entities/tuning-constants.ts
• tests/parity/full-run.scenarios.json
• tests/parity/lists.scenarios.json
• tests/parity/main-scenario.scenarios.json
• tests/parity/scenarios.json
• tests/parity/sdk-flows.scenarios.json
• utils/debug-flags.ts

---

📝 Walkthrough

Walkthrough

The PR introduces viewport-aware lazy rendering for the VaultsBorrowList component. A new UiLazyListItem component uses IntersectionObserver to mount only viewport-near rows while rendering fixed-height placeholders offscreen. VaultsBorrowList integrates this when the fullListRenderOptIn feature flag is enabled, with adaptive row height estimation. Test scenarios seed the feature flag via localStorage.

Changes

Windowed List Rendering

Layer / File(s)	Summary
Tuning constants and feature flag entities/tuning-constants.ts, utils/debug-flags.ts	Added LIST_RENDER_BUFFER_PX and LIST_EAGER_RENDER_ROWS tuning constants, plus fullListRenderOptIn debug flag read from ?fullrender URL param or localStorage.euler_full_render.
UiLazyListItem component components/ui/UiLazyListItem.vue	New Vue 3 component that uses a shared IntersectionObserver to mount row content only when within viewport buffer distance, rendering fixed-height placeholders when offscreen, and emitting measured row heights for adaptive sizing.
VaultsBorrowList windowing integration components/entities/vault/VaultsBorrowList.vue	Reworks control flow to show full list under windowing (vs progressive batch-render when disabled), adds row height tracking for placeholders, and wraps each item in UiLazyListItem with adaptive estimated-height and eager-render thresholds.
Test scenario localStorage defaults tests/parity/*.scenarios.json	All test scenario files updated to seed euler_full_render: "1" in localStorage defaults, enabling windowed rendering during test execution.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested reviewers

• dglowinski
• Seranged
• kasperpawlowski

Poem

A windowed list now renders with grace,
Placeholders holding each offscreen place,
Only the visible rows take their stand,
While IntersectionObserver lends a hand—
Faster lists dance across your screen! 🐰✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Lazy load rows' directly and concisely describes the main change—implementing windowed/lazy rendering for list rows in VaultsBorrowList.vue via a new UiLazyListItem component.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch lazy-load-borrow-page

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[railway-app]

🚅 Deployed to the euler-lite-pr-573 environment in euler-lite

Service	Status	Web	Updated (UTC)
dev-build	✅ Success (View Logs)	Web	Jun 11, 2026 at 8:01 am

[LeonardEulerXYZ]

Reviewed current head db17e35.

Verdict: COMMENT — no blocking findings from this pass.

What changed:

• Borrow/multiply pair list now uses viewport-windowed row rendering by default.
• A new UiLazyListItem mounts rows near the viewport and uses fixed-height placeholders for offscreen rows.
• fullrender / euler_full_render disables windowing for parity capture flows.

Risk areas checked:

• SSR/client behavior for the browser-only debug flag.
• IntersectionObserver lifecycle and shared observer cleanup.
• Placeholder height behavior while scrolling desktop and mobile borrow lists.
• Parity-capture escape hatch keeping all borrow rows mounted.
• Whole-diff malicious-code/supply-chain sweep: no new network calls, secrets, install hooks, eval/dynamic execution, or dependency/workflow changes found.

Validation:

• git diff --check origin/development...HEAD: passed
• npm run typecheck: passed
• npm run test:run: passed, 895 passed / 1 skipped
• npm run build: passed, with existing-style Rollup chunk/pure-annotation warnings only
• Browser visual smoke on Railway PR preview /borrow?network=1:
  • Desktop 1440x1000: real borrow list rendered; 190 total pairs, 11 mounted cards at top, 179 placeholders; after mid-page scroll, rows remounted around viewport; no material console/page errors.
  • Mobile 390x844: real borrow list rendered; 190 total pairs, 4 mounted cards at top, 186 placeholders; after mid-page scroll, rows remounted around viewport; no material console/page errors.
  • fullrender escape hatch: /borrow?network=1&fullrender=1 mounted all 188 observed pairs with zero placeholders and data-rendered-count=188; no material errors.

Screenshot evidence from the public PR preview:

Desktop borrow list, top and scrolled:

Mobile borrow list, top and scrolled:

Coverage notes:

• Smoke coverage: browser visual smoke + mobile smoke on the changed borrow list surface; no wallet/signing smoke, because this PR changes list rendering rather than transaction construction.
• I did not find prior Leonard-authored comments/reviews on this PR to update or clean up.