Improve Wrapping React preview loading

Merged
CA
2d ago
+234-22

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.