Skip to content

Improve Wrapping React preview loading - #7658

Merged
carlosabadia merged 4 commits into
mainfrom
carlos/eng-13557-smart-load-spline-preview
Oct 26, 2026
Merged

Improve Wrapping React preview loading#7658
carlosabadia merged 4 commits into
mainfrom
carlos/eng-13557-smart-load-spline-preview

Conversation

@carlosabadia

@carlosabadia carlosabadia commented Oct 26, 2026

Copy link
Copy Markdown
Contributor

The Wrapping React overview eagerly loads and mounts Spline's 3D scene while readers are still reading the introduction. Import Spline through NoSSRComponent and defer the preview until it is visible and the browser has idle time. Readers still see the example automatically, and the Code tab remains available before it loads.

Pending preview loads are canceled when readers scroll away or switch tabs. Browsers without idle callbacks use a timer fallback. This also improves the scheduling of existing deferred documentation demos.

Fixes ENG-13557.

Validation

  • Added failing regressions before implementation.
  • 159 shared-site unit tests, 27 docs tests, 4 production-browser tests, and 5 frontend checks passed.
  • Browser tests verify that the offscreen runtime is not downloaded, visible previews wait for idle time, pending work is canceled on scroll-away and tab changes, and native/fallback scheduling loads the scene successfully.
  • Repository Ruff lint/format and pyright reflex tests passed. Regenerated stubs; pyi_hashes.json is unchanged.
  • All pre-commit hooks passed for the changed files, including codespell, Pyright, ty, and Biome.
  • Focused local production Lighthouse: 70 mobile / 98 desktop, with 24 ms / 8 ms blocking. The mobile initial load makes no Spline scene request; desktop loads it automatically when already visible. These are local focused-build measurements; the deployed full site needs a fresh audit.

The full unit run reached 75.09% coverage. After rerunning sandbox-blocked tests with local socket/process access, 12,384 tests passed and five unrelated failures remained. All five also fail with the original sources:

  • test_typed_dict_helpers_resolve_lazy_annotations
  • test_compile_sends_telemetry_when_enabled
  • test_compile_reports_exception_and_reraises
  • test_compile_event_features_used_match_populated_app
  • test_compile_event_features_used_stable_across_hot_reload

Submission checklist

  • Reviewed CONTRIBUTING.md and performed an adversarial diff review.
  • Checked open PRs for an overlapping fix.
  • Added regression/browser coverage, documentation, and package news fragments.
  • Non-breaking performance fix.

@carlosabadia
carlosabadia requested review from a team and Alek99 as code owners October 26, 2026 10:16
@linear-code

linear-code Bot commented Oct 26, 2026

Copy link
Copy Markdown

ENG-13557

@carlosabadia carlosabadia added the skip-changelog For doc/internal changes label Oct 26, 2026
cubic-dev-ai[bot]
cubic-dev-ai Bot reviewed Oct 26, 2026
View reviewed changes

@cubic-dev-ai cubic-dev-ai Bot left a comment •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

All reported issues were addressed across 10 files

Reply with feedback, questions, or to request a fix.

View guided diff | Turn on auto-fix | Re-trigger cubic

Comment thread packages/reflex-site-shared/README.md Outdated
Comment thread docs/app/tests/test_editorial_browser.py Outdated
@greptile-apps

greptile-apps Bot commented Oct 26, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

RetriggerView in GreptileConfidence Score: 5/5

[Medium impact] The PR appears safe to merge; no new actionable issues were found.

Summary

The PR delays the Spline preview until it approaches the viewport and the browser has idle time.

  • Documentation previews wait until they are near the reader and the browser has idle time.

Reviews (4) · Last reviewed commit: "Number deferred demos per page instead o..." · Reviewed by Greptile

greptile-apps[bot]
greptile-apps Bot reviewed Oct 26, 2026
View reviewed changes
Comment thread docs/app/tests/test_editorial_browser.py Outdated
@codspeed

codspeed Bot commented Oct 26, 2026 •
edited
Loading

Copy link
Copy Markdown

Merging this PR will degrade performance by 4.57%

2 warnings

⚠️ 17 benchmarks are dominated by system calls

System calls cannot be simulated consistently and are left out of the measure. The reported value understates the real cost. Switch to the Walltime instrument to measure them.

Learn more about system calls

See affected benchmarks

⚠️ Base and head ran on different runner types

Some benchmarks with significant performance changes were compared across different runner types, so the changes might not come from the code. Run base and head on the same runner type, or use CodSpeed Macro Runners for more stable results.

Learn more about Macro Runners

Open the report in CodSpeed to investigate

❌ 1 regressed benchmark
✅ 147 untouched benchmarks

Warning

Please fix the performance issues or acknowledge them on CodSpeed.

Performance Changes

Benchmark BASE HEAD Efficiency
❌ test_state_access[write_own] 129.8 ms 136 ms -4.57%

Tip

Investigate this regression by commenting @codspeedbot fix this regression on this PR, or directly use the CodSpeed MCP with your agent.

Comparing carlos/eng-13557-smart-load-spline-preview (363d0df) with main (656e8c7)

Open in CodSpeed

@carlosabadia @claude
Restore deferred demo prefetch margin and remount loaded previews
f8629a7 
Keep the 200px IntersectionObserver margin so deferred previews start
loading just before they scroll in, and remember loaded demos by a
stable per-page id so switching back from the Code tab remounts them
without another idle wait.

Merge the README defer docs into the existing section, use the public
rx.NoSSRComponent in the Wrapping React example, and tighten the tests:
assert the tab switch cancels a pending load, replace the
renderSplineScene content check with a script-request count, and drop
stale loadOnClick assertions.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
cubic-dev-ai[bot]
cubic-dev-ai Bot reviewed Oct 26, 2026
View reviewed changes

@cubic-dev-ai cubic-dev-ai Bot left a comment •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

All reported issues were addressed across 9 files (changes from recent commits).

Reply with feedback, questions, or to request a fix.

View guided diff | Turn on auto-fix | Re-trigger cubic

Comment thread packages/reflex-site-shared/src/reflex_site_shared/docs/markdown.py Outdated
carlosabadia and others added 2 commits October 26, 2026 11:40
@carlosabadia @claude
Drop reflex-site-shared floor from the docs app
2015c00 
The docs app builds with any reflex-site-shared that supports defer;
the new loader is picked up from the workspace without a floor.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@carlosabadia @claude
Number deferred demos per page instead of hashing their source
363d0df 
Identical defer fences on one page shared an id, so loading one made the
other skip its visibility and idle wait. Ids are now the page path plus
the fence's position, which stays stable across renders.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@carlosabadia
carlosabadia merged commit 9bcfc8c into main Oct 26, 2026
168 of 169 checks passed
@carlosabadia
carlosabadia deleted the carlos/eng-13557-smart-load-spline-preview branch October 26, 2026 16:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@greptile-apps greptile-apps[bot] greptile-apps[bot] left review comments
@cubic-dev-ai cubic-dev-ai[bot] cubic-dev-ai[bot] left review comments
@FarhanAliRaza FarhanAliRaza FarhanAliRaza approved these changes
@Alek99 Alek99 Awaiting requested review from Alek99 Alek99 is a code owner

Assignees

No one assigned

Labels

skip-changelog For doc/internal changes

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@carlosabadia @FarhanAliRaza