Defer Charts docs runtime until interaction - #1131
Conversation
📝 WalkthroughWalkthroughChart examples no longer load from viewport visibility. The fallback displays explicit Edit and Run controls. Selecting a control activates the current example and passes the selected editing mode to the client component. ChangesChart example activation
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant Reader
participant ChartsCatalogDocExample
participant ChartsCatalogDocExampleClient
Reader->>ChartsCatalogDocExample: Select Edit or Run
ChartsCatalogDocExample->>ChartsCatalogDocExample: Activate current example
ChartsCatalogDocExample->>ChartsCatalogDocExampleClient: Load with edit mode
ChartsCatalogDocExampleClient->>ChartsCatalogDocExampleClient: Synchronize editing state
Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 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 |
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
tanstack-com | 301b31f | Commit Preview URL Branch Preview URL |
Aug 09 2026, 02:51 PM |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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 `@tests/charts-catalog-frame-embedding.test.ts`:
- Around line 166-167: Extend the chart catalog embedding tests around the
existing HTML assertions with an interactive client-component test: verify
passive rendering does not load the live client, then trigger the Run and Edit
controls separately and verify each loads the client with its corresponding
selected mode. Use the existing test setup and client-loading symbols rather
than relying on renderToStaticMarkup for activation 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: 42cf3ea5-c0de-42b0-bb87-f76e11b61a1b
📒 Files selected for processing (3)
src/components/charts/ChartsCatalogDocExample.client.tsxsrc/components/charts/ChartsCatalogDocExample.tsxtests/charts-catalog-frame-embedding.test.ts
| assert.match(html, />Edit</) | ||
| assert.match(html, />Run</) |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | 🏗️ Heavy lift
Add an interactive activation test.
renderToStaticMarkup cannot execute these controls. It does not verify that passive rendering avoids loading the live client. It does not verify that Run or Edit activates the client with the selected mode.
Add a client-side component test that confirms passive rendering performs no client load, then confirms each explicit action activates the client. The PR objective requires this behavior.
🤖 Prompt for 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.
In `@tests/charts-catalog-frame-embedding.test.ts` around lines 166 - 167, Extend
the chart catalog embedding tests around the existing HTML assertions with an
interactive client-component test: verify passive rendering does not load the
live client, then trigger the Run and Edit controls separately and verify each
loads the client with its corresponding selected mode. Use the existing test
setup and client-loading symbols rather than relying on renderToStaticMarkup for
activation behavior.
1 participant
What changed
Evidence and impact
Charts docs currently contain 89 chart examples across 29 pages. Before this change, approaching each example loaded its workspace and browser compiler automatically. The production esbuild WASM asset is 13.5 MB raw / 3.6 MB gzip, before example modules.
A browser check on the Lines and Areas docs page confirmed that scrolling through four passive examples made no Charts example client, esbuild-wasm, or esm.sh requests. Run then loaded the live chart and compiler; Edit loaded the workbench.
Validation
Risk
Low. The live runtime and editor are unchanged after activation. The behavior change is limited to requiring explicit intent before loading them.
Closes #1130
Summary by CodeRabbit