fix(router): apply preload delay to viewport links - #8044
Conversation
|
View your CI Pipeline Execution ↗ for commit dddc18d
☁️ Nx Cloud last updated this comment at |
🚀 Changeset Version Preview4 package(s) bumped directly, 19 bumped as dependents. 🟩 Patch bumps
|
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughThe React, Solid, and Vue routers now delay viewport preloading with ChangesLink preloading
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Bundle Size Benchmarks
The following scenarios have bundle-size changes compared with the baseline:
Current gzip tracks all emitted client JS chunks. Initial gzip tracks only the entry/import graph. Trend sparkline is historical current gzip ending with this PR measurement; lower is better. |
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/react-router/src/link.tsx`:
- Around line 648-653: Ensure delayed preload timers recheck current eligibility
before invoking doPreload: in packages/react-router/src/link.tsx (648-653),
store the latest eligible preload mode in a ref or cancel timers when
eligibility changes; in packages/solid-router/src/link.tsx (279-285),
re-evaluate preload(); and in packages/vue-router/src/link.tsx (275-281),
re-evaluate preload.value. Disabled links and links with reloadDocument enabled
must not preload.
- Line 738: Wrap the return in the touch-intent preload condition with curly
braces in the relevant link logic: update packages/react-router/src/link.tsx at
lines 738-738, packages/solid-router/src/link.tsx at lines 373-373, and
packages/vue-router/src/link.tsx at lines 347-347, preserving the existing
condition and return behavior.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 2431d791-7134-4f46-bd10-bc9d4dc2850c
📒 Files selected for processing (16)
.changeset/tidy-links-wait.mddocs/router/api/router/LinkOptionsType.mddocs/router/api/router/RouterOptionsType.mddocs/router/guide/navigation.mddocs/router/guide/preloading.mdpackages/react-router/src/link.tsxpackages/react-router/tests/link.test.tsxpackages/react-router/tests/utils.tspackages/router-core/src/link.tspackages/router-core/src/router.tspackages/solid-router/src/link.tsxpackages/solid-router/tests/link.test.tsxpackages/solid-router/tests/utils.tspackages/vue-router/src/link.tsxpackages/vue-router/tests/link.test.tsxpackages/vue-router/tests/utils.ts
Merging this PR will degrade performance by 6.47%
|
| Mode | Benchmark | BASE |
HEAD |
Efficiency | |
|---|---|---|---|---|---|
| ⚡ | Memory | mem server error-paths not-found (vue) |
777.5 KB | 481.3 KB | +61.54% |
| ⚡ | Memory | mem server error-paths not-found (react) |
414.1 KB | 397.3 KB | +4.22% |
| ⚡ | Memory | mem server error-paths error (react) |
1,020.9 KB | 989 KB | +3.22% |
| 👁 | Memory | mem server error-paths redirect (vue) |
405.6 KB | 421.3 KB | -3.72% |
| 👁 | Memory | mem server error-paths not-found (solid) |
569.9 KB | 783.9 KB | -27.29% |
| 👁 | Memory | mem server error-paths redirect (solid) |
379.9 KB | 392.4 KB | -3.19% |
| 👁 | Memory | mem server peak-large-page (react) |
1.2 MB | 2.3 MB | -49.99% |
| 👁 | Memory | mem client preload-churn (vue) |
759.1 KB | 818.6 KB | -7.27% |
| 👁 | Memory | mem client unique-location-churn (vue) |
1.3 MB | 1.3 MB | -3.05% |
| 👁 | Memory | mem client navigation-churn (solid) |
693.2 KB | 716.8 KB | -3.29% |
Tip
Curious why this is faster? Comment @codspeedbot explain why this is faster on this PR, or directly use the CodSpeed MCP with your agent.
Comparing fix/viewport-preload-delay (dddc18d) with main (7e93431)
There was a problem hiding this comment.
Important
At least one additional CI pipeline execution has run since the conclusion below was written and it may no longer be applicable.
Nx Cloud has identified a possible root cause for your failed CI:
We identified that this failure is unrelated to the PR's changes, which are scoped to viewport preload delay logic in the router adapters. The tanstack-solid-start-e2e-basic-cloudflare test fails because the Cloudflare Workers runtime is not active during vite preview, preventing the expected UI element from rendering — a pre-existing environment configuration issue. No changes to this PR are required to resolve it.
No code changes were suggested for this issue.
Trigger a rerun:
🎓 Learn more about Self-Healing CI on nx.dev
Fixes #8029
Summary
preloadDelayto viewport link preloading in the React, Solid, and Vue adapters{ rootMargin: "100px" }configuration inside each adapter observer utility and remove its options parameterTesting
pnpm nx run-many --target=test:unit --projects=@tanstack/react-router,@tanstack/solid-router,@tanstack/vue-routerpnpm nx run-many --target=test:types --projects=@tanstack/router-core,@tanstack/react-router,@tanstack/solid-router,@tanstack/vue-routerpnpm nx run-many --target=test:eslint --projects=@tanstack/router-core,@tanstack/react-router,@tanstack/solid-router,@tanstack/vue-routerBundle Size
Affected gzip fixtures remain effectively flat versus the base commit:
-2 B/-9 B+5 B/+3 B0 B/-10 BSummary by CodeRabbit
New Features
Bug Fixes
Documentation