Add RSC FOUC acceptance coverage#4033
Conversation
justin808
added
full-ci
full-ci-no-benchmarks
WalkthroughAdds FOUC (Flash of Unstyled Content) acceptance-test infrastructure to the dummy app. Two new Rails routes, controller actions, and ERB views expose RSC-streaming and client-only probe pages. Corresponding React components with CSS sentinel variables serve as fixtures. A 454-line Playwright spec intercepts CSS/JS delivery and asserts correct visibility timing for both rendering modes. ChangesRSC & Client-Only FOUC Probe E2E Test Infrastructure
Sequence Diagram(s)sequenceDiagram
participant Test as Playwright Test
participant Page as Browser Page
participant WebpackDev as Webpack Dev Server
participant RailsApp as Rails App
Test->>Page: navigate to /pages/rsc_fouc_probe or /pages/client_side_fouc_probe
Page->>RailsApp: GET route → controller action → ERB view
RailsApp-->>Page: HTML + streaming RSC or client-only component mount
Test->>Page: addInitScript(recordProbePaints)
Page->>Page: rAF loop samples computed styles and visibility → window.__reactOnRailsFoucProbePaints
Test->>Page: controlCssBySentinel(sentinel) → intercept webpack CSS
WebpackDev-->>Page: CSS buffered, held until cssController.release()
Test->>Page: delayCompiledJavaScript() → intercept webpack JS
WebpackDev-->>Page: JS buffered, held until jsController.release()
Test->>Page: expectNoVisiblePaint(testId)
Test->>Page: cssController.release()
Page->>Page: CSS applied → computed styles updated
Test->>Page: expectProbeStyled(testId, expectedStyle)
Page-->>Test: poll readProbeStyle until visible + style matches sentinel
Test->>Page: jsController.release()
Page->>Page: JS hydrated → component finalized
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related issues
Possibly related PRs
Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
justin808
force-pushed
the
jg-codex/rsc-fouc-acceptance-tests
branch
from
e050fb8 to
8236d61
Compare
|
+ci-status |
Greptile SummaryThis PR adds Playwright acceptance coverage for FOUC (Flash of Unstyled Content) behavior under streamed RSC and client-only rendering in the Pro dummy app. No production runtime code is changed.
Confidence Score: 4/5Safe to merge — no production code is changed; all changes are test fixtures, probe components, routes, and the Playwright spec itself. The two active tests pass CI and the four pending tests are correctly gated behind a feature-flag env var. The spec has a timing ambiguity where react_on_rails_pro/spec/dummy/e2e-tests/rsc_fouc.spec.ts — specifically the Important Files Changed
Sequence DiagramsequenceDiagram
participant T as Test
participant PW as Playwright Route Handler
participant B as Browser
T->>PW: "controlCssBySentinel(holdTarget=true)"
T->>B: page.goto(probe_path)
B->>PW: "GET *.css"
PW->>PW: fetch + read body
PW->>T: resolveTargetRequest(url)
Note over PW: await releaseGate (CSS held)
T->>T: expectNoVisiblePaint
T->>PW: releaseTarget()
PW->>T: resolveTargetResponse(url) ← promise resolves HERE
PW->>B: route.fulfill() ← CSS bytes arrive HERE
T->>T: waitForTargetResponse() resolved
T->>T: expectProbeStyled (polls 10s)
Reviews (1): Last reviewed commit: "Add RSC FOUC acceptance coverage" | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
Review: RSC FOUC acceptance coverageOverall this is a well-designed test PR. Using CSS custom properties as load sentinels (instead of guessing hashed filenames) is the right approach — it's resilient to bundler changes and makes intent explicit. The Summary of findingsFour issues in
Minor observations (no action required)
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
react_on_rails_pro/spec/dummy/client/app/components/FoucProbe/ClientOnlyFoucProbeView.jsx (1)
16-16: 💤 Low valueOptional: React import is not needed with modern JSX transform.
React 19 with the modern JSX transform (enabled per the upgrade guide) does not require importing React for JSX. You can safely remove this import.
♻️ Optional cleanup
-import React from 'react'; import styles from './ClientOnlyFoucProbeView.module.scss';🤖 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 `@react_on_rails_pro/spec/dummy/client/app/components/FoucProbe/ClientOnlyFoucProbeView.jsx` at line 16, The import statement for React at the top of ClientOnlyFoucProbeView.jsx is unnecessary with React 19's modern JSX transform. Remove the `import React from 'react';` line since the modern JSX transform automatically handles JSX transformation without requiring an explicit React import.react_on_rails_pro/spec/dummy/e2e-tests/rsc_fouc.spec.ts (1)
57-76: ⚡ Quick winUse
interfacefor object shapes per coding guidelines.The coding guidelines specify: "Prefer
interfacefor defining object shapes in TypeScript" for**/*.{ts,tsx}files.ProbeStyle,CssController, andJavaScriptControllerare all pure object shapes and should useinterfaceinstead oftype.♻️ Refactor to use interfaces
-type ProbeStyle = { +interface ProbeStyle { attached: boolean; backgroundColor?: string; borderTopColor?: string; color?: string; sentinel?: string; visible: boolean; -}; +} -type CssController = { +interface CssController { loadedBodies: string[]; releaseTarget: () => void; waitForTargetRequest: () => Promise<string>; waitForTargetResponse: () => Promise<string>; -}; +} -type JavaScriptController = { +interface JavaScriptController { delayedRequests: string[]; releaseScripts: () => void; -}; +}🤖 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 `@react_on_rails_pro/spec/dummy/e2e-tests/rsc_fouc.spec.ts` around lines 57 - 76, Convert the three type aliases ProbeStyle, CssController, and JavaScriptController to use the interface keyword instead of type. Replace the type keyword and equals sign with the interface keyword, keeping the object shape structure identical. This aligns with the coding guidelines that prefer interfaces for defining object shapes in TypeScript files.Source: Coding guidelines
🤖 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.
Nitpick comments:
In
`@react_on_rails_pro/spec/dummy/client/app/components/FoucProbe/ClientOnlyFoucProbeView.jsx`:
- Line 16: The import statement for React at the top of
ClientOnlyFoucProbeView.jsx is unnecessary with React 19's modern JSX transform.
Remove the `import React from 'react';` line since the modern JSX transform
automatically handles JSX transformation without requiring an explicit React
import.
In `@react_on_rails_pro/spec/dummy/e2e-tests/rsc_fouc.spec.ts`:
- Around line 57-76: Convert the three type aliases ProbeStyle, CssController,
and JavaScriptController to use the interface keyword instead of type. Replace
the type keyword and equals sign with the interface keyword, keeping the object
shape structure identical. This aligns with the coding guidelines that prefer
interfaces for defining object shapes in TypeScript files.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: d2dec073-9c6c-4693-928e-c1ba0770c0cc
📒 Files selected for processing (15)
react_on_rails_pro/spec/dummy/app/controllers/pages_controller.rbreact_on_rails_pro/spec/dummy/app/views/pages/client_side_fouc_probe.html.erbreact_on_rails_pro/spec/dummy/app/views/pages/rsc_fouc_probe.html.erbreact_on_rails_pro/spec/dummy/client/app/components/FoucProbe/ClientOnlyFoucProbeView.jsxreact_on_rails_pro/spec/dummy/client/app/components/FoucProbe/ClientOnlyFoucProbeView.module.scssreact_on_rails_pro/spec/dummy/client/app/components/FoucProbe/RscFoucProbeClient.jsxreact_on_rails_pro/spec/dummy/client/app/components/FoucProbe/RscFoucProbeClient.module.scssreact_on_rails_pro/spec/dummy/client/app/ror-auto-load-components/ClientOnlyFoucProbe.client.jsxreact_on_rails_pro/spec/dummy/client/app/ror-auto-load-components/RscFoucProbe.jsxreact_on_rails_pro/spec/dummy/client/app/ror-auto-load-components/UnusedFoucProbe.client.jsxreact_on_rails_pro/spec/dummy/client/app/ror-auto-load-components/UnusedFoucProbe.module.scssreact_on_rails_pro/spec/dummy/config/routes.rbreact_on_rails_pro/spec/dummy/e2e-tests/rsc_fouc.spec.tsreact_on_rails_pro/spec/dummy/package.jsonreact_on_rails_pro/spec/dummy/tests/package-scripts.test.js
justin808
force-pushed
the
jg-codex/rsc-fouc-acceptance-tests
branch
from
8236d61 to
dc9c99c
Compare
Review: FOUC acceptance tests for RSC and client-only renderingGood addition overall. The CSS sentinel approach is robust, the Four issues worth addressing before merge:
Minor / non-blocking: |
justin808
force-pushed
the
jg-codex/rsc-fouc-acceptance-tests
branch
from
dc9c99c to
446c43e
Compare
justin808
force-pushed
the
jg-codex/rsc-fouc-acceptance-tests
branch
from
446c43e to
ee0a290
Compare
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: ee0a29098f
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
|
+ci-run-full |
Code ReviewOverall the FOUC acceptance harness is well-designed. The sentinel-based CSS interception (inspecting response bodies for CSS custom properties rather than guessing content-hashed filenames) is a robust approach, and the active/pending split with linked issue numbers is a clear way to preserve failing coverage without breaking CI. However, comparing the current branch state to what the PR description lists as "fixed in review," four of those fixes appear to have been accidentally reverted in one of the amendment rounds. All four are in
There is also a minor robustness issue in the active (non-pending) test at line 311: No security concerns and no production code is changed, so the blast radius is test-only. The issues above are worth a fix pass before merging since several of them were explicitly called out as already fixed in the review notes. |
justin808
force-pushed
the
jg-codex/rsc-fouc-acceptance-tests
branch
from
ee0a290 to
a3696fb
Compare
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: a3696fb617
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
justin808
force-pushed
the
jg-codex/rsc-fouc-acceptance-tests
branch
from
a3696fb to
a5b27f1
Compare
…e-demo-cost-docs * origin/main: Add RSC FOUC acceptance coverage (#4033) Keep plan-pr-batch goal prompts under 4000 chars (#4025) docs(skills): file-collision check + goal-prompt size discipline for plan-pr-batch (#3914) Verify React 19.2 <Activity> with react_component (CSR + SSR-hydrate) + docs (#3938) Allow Pro RSC peer check for React 19.2 (#4026) Split llms-full.txt into OSS and Pro tiers to clear the 2048 KiB gate (#4021) Codify maintainer attention contract (#3987) Docs: correct vm.Script caching analysis caveats (#3997) CI: handle unavailable PR head repo for +ci-run-full (#3986) Fix Pro dummy lockfile drift and rich text demo (#3989) Add FOUC integration tests for generated CSS (#4005) Make per-PR benchmarks opt-in and trim per-route warm-up (#4012) (#4013) Treat docs-internal/ tree as documentation in CI change detection (#4016) Add issue triage prompt skill (#3983) Point coordination docs at agent-coord bootstrap (#4008) Docs: backfill async RSC manifest changelog entry (#3993) Migrate conductor.json to .conductor/settings.toml (#4007) Bump react-hooks lint to v6 and document RSC compiler boundary (#3963)
* origin/main: Expose React 19 root error callbacks (rootErrorHandlers) + hydration-mismatch debugging guide (#3933) Add post-merge audit scope resolver (#4029) Document continuous agent-run evaluation loop (#4028) Tools: add PR batch merge ledger (#3996) Add RSC FOUC acceptance coverage (#4033) Keep plan-pr-batch goal prompts under 4000 chars (#4025) docs(skills): file-collision check + goal-prompt size discipline for plan-pr-batch (#3914) Verify React 19.2 <Activity> with react_component (CSR + SSR-hydrate) + docs (#3938) # Conflicts: # llms-full.txt
* origin/main: Expose React 19 root error callbacks (rootErrorHandlers) + hydration-mismatch debugging guide (#3933) Add post-merge audit scope resolver (#4029) Document continuous agent-run evaluation loop (#4028) Tools: add PR batch merge ledger (#3996) Add RSC FOUC acceptance coverage (#4033) Keep plan-pr-batch goal prompts under 4000 chars (#4025) docs(skills): file-collision check + goal-prompt size discipline for plan-pr-batch (#3914) Verify React 19.2 <Activity> with react_component (CSR + SSR-hydrate) + docs (#3938) # Conflicts: # CHANGELOG.md # llms-full.txt
…ter-slice * origin/main: Expose React 19 root error callbacks (rootErrorHandlers) + hydration-mismatch debugging guide (#3933) Add post-merge audit scope resolver (#4029) Document continuous agent-run evaluation loop (#4028) Tools: add PR batch merge ledger (#3996) Add RSC FOUC acceptance coverage (#4033) Keep plan-pr-batch goal prompts under 4000 chars (#4025) docs(skills): file-collision check + goal-prompt size discipline for plan-pr-batch (#3914) Verify React 19.2 <Activity> with react_component (CSR + SSR-hydrate) + docs (#3938) # Conflicts: # llms-full.txt
…ce-maps * origin/main: Expose React 19 root error callbacks (rootErrorHandlers) + hydration-mismatch debugging guide (#3933) Add post-merge audit scope resolver (#4029) Document continuous agent-run evaluation loop (#4028) Tools: add PR batch merge ledger (#3996) Add RSC FOUC acceptance coverage (#4033) Keep plan-pr-batch goal prompts under 4000 chars (#4025) docs(skills): file-collision check + goal-prompt size discipline for plan-pr-batch (#3914) Verify React 19.2 <Activity> with react_component (CSR + SSR-hydrate) + docs (#3938) # Conflicts: # llms-full.txt
…c-streaming * origin/main: Expose React 19 root error callbacks (rootErrorHandlers) + hydration-mismatch debugging guide (#3933) Add post-merge audit scope resolver (#4029) Document continuous agent-run evaluation loop (#4028) Tools: add PR batch merge ledger (#3996) Add RSC FOUC acceptance coverage (#4033) # Conflicts: # llms-full.txt
1 participant
Summary
Adds Pro dummy-app Playwright acceptance coverage for FOUC behavior under streamed RSC and client-only rendering. The tests assert browser-visible outcomes instead of implementation details:
/rsc_fouc_probe/client_side_fouc_probeThis PR intentionally does not change production runtime behavior. It adds acceptance tests plus pending markers for failures that expose the current FOUC bugs.
Research Basis
precedencecan suspend the rendering component until stylesheet load: https://react.dev/reference/react-dom/components/linkTest Outcomes
Active in CI:
/rsc_fouc_probeand/client_side_fouc_probeload the matching rendered CSS sentinel and do not load--unused-fouc-probe-sentinele2e-test:rscpackage-script guard now assertse2e-tests/rsc_fouc.spec.tsstays in the RSC Playwright suitePending because they reveal existing user-visible bugs:
Pending #4032: streamed RSC content is visible and styled when its CSS is loaded, even while JS is delayedPending #4032: streamed RSC content does not appear before its CSS when JS is availablePending #4032: streamed RSC content still waits for CSS if JS finishes firstPending #4031: client-only content does not appear until CSS loads, even when JS is readyFollow-ups:
No follow-up was opened for unrelated CSS loading because the minimal-CSS acceptance test passes.
Merge Rationale
This PR should be merged once CI and current-head review pass because it locks down the behavior Abanoub asked for without masking the known runtime defects. Passing tests stay active and guard against broad CSS-loading regressions. Failing behavior is preserved as opt-in pending coverage with linked issues and
REACT_ON_RAILS_RUN_PENDING_FOUC_TESTS=truereproduction, so main stays green while the real FOUC bugs become mechanically reproducible.Labels:
full-ci,full-ci-no-benchmarks. This touches Pro dummy RSC/e2e coverage and the RSC test script, so broad CI is useful; benchmarks are not meaningful because this is test fixture coverage only and no production runtime code changes.Agent Merge Confidence
Mode: accelerated-rc
Current head SHA: a5b27f1
Score: 9/10
Auto-merge recommendation: yes
Affected areas: RSC, Pro dummy app, Playwright e2e, package scripts
CI detector:
script/ci-changes-detector origin/main-> React on Rails Pro Dummy app; recommended lint, Pro lint, Pro dummy integration, and Pro benchmarks. PR usesfull-ci,full-ci-no-benchmarks; benchmark skips are expected because this is test fixture coverage only and does not change production runtime code.Validation run:
2 passed, 4 skipped); opt-in pending run produced the expected existing-bug failures (4 failed, 2 passed);pnpm run build,build:test,build:test:rspack,e2e-test:rsc,pnpm run lint,pnpm start format.listDifferent, Pro RuboCop all passed;pnpm exec tsc --noEmit --pretty falseonly reports the pre-existingtests/strict-mode-support.test.tsxunknown-props errors.full-ci-no-benchmarks, path selection, or non-review event skips.Review/check gate:
claude-reviewcheck succeeded for a5b27f1 at 2026-06-15T00:53:54Z; no confirmed blocker.Known residual risk: Existing runtime FOUC bugs are intentionally not fixed here; they are captured by pending acceptance tests linked to Follow-up: Fix client-only component reveal until CSS and JS are ready #4031 and Follow-up: Fix RSC streamed component CSS reveal gating to prevent FOUC #4032. This PR only adds acceptance coverage and test fixtures.
Finalized by: Claude Code Review
claude-reviewcheck for a5b27f1 (GitHub check run completed successfully at 2026-06-15T00:53:54Z), a named review/check identity separate from the PR authoring agent.Verification
pnpm run build-> passed(cd react_on_rails_pro/spec/dummy && bundle exec rake react_on_rails:generate_packs)-> passed(cd react_on_rails_pro/spec/dummy && pnpm run build:test)-> passed with existing warnings(cd react_on_rails_pro/spec/dummy && pnpm run node-renderer)(cd react_on_rails_pro/spec/dummy && RAILS_ENV=test bundle exec rails server -p 3000)(cd react_on_rails_pro/spec/dummy && pnpm exec playwright test e2e-tests/rsc_fouc.spec.ts --project=chromium --reporter=line)-> passed,2 passed, 4 skipped(cd react_on_rails_pro/spec/dummy && REACT_ON_RAILS_RUN_PENDING_FOUC_TESTS=true pnpm exec playwright test e2e-tests/rsc_fouc.spec.ts --project=chromium --reporter=line)-> expected failures,4 failed, 2 passed(cd react_on_rails_pro/spec/dummy && pnpm run build:test:rspack)-> passed with existing warnings(cd react_on_rails_pro/spec/dummy && pnpm e2e-test:rsc)-> passed,36 passed, 12 skippedpnpm install --frozen-lockfile-> refreshed stale localnode_modulesto lockfile state, no tracked changescd react_on_rails_pro/spec/dummy && pnpm exec eslint e2e-tests/rsc_fouc.spec.ts tests/package-scripts.test.js-> passedcd react_on_rails_pro/spec/dummy && pnpm exec jest tests/package-scripts.test.js-> passed,7 passedcd react_on_rails_pro/spec/dummy && pnpm exec tsc --noEmit --pretty false-> no errors from this PR; existingtests/strict-mode-support.test.tsxstrict-mode errors remainpnpm run lint-> passedpnpm start format.listDifferent-> passed(cd react_on_rails_pro && BUNDLE_GEMFILE=../Gemfile bundle exec rubocop --ignore-parent-exclusion)-> passedpages_controller.rbandroutes.rbcd react_on_rails_pro/spec/dummy && pnpm exec eslint e2e-tests/rsc_fouc.spec.ts-> passedpnpm start format.listDifferent-> passed(cd react_on_rails_pro/spec/dummy && pnpm exec playwright test e2e-tests/rsc_fouc.spec.ts --project=chromium --reporter=line)-> passed,2 passed, 4 skippedpnpm run lint-> passed after removing ignored node-renderer runtime bundles generated by the browser runcd react_on_rails_pro/spec/dummy && pnpm exec tsc --noEmit --pretty false-> only existingtests/strict-mode-support.test.tsxstrict-mode errors; no errors from this PRcd react_on_rails_pro/spec/dummy && pnpm exec eslint e2e-tests/rsc_fouc.spec.ts-> passed(cd react_on_rails_pro/spec/dummy && pnpm exec playwright test e2e-tests/rsc_fouc.spec.ts --project=chromium --reporter=line)-> passed,2 passed, 4 skippedpnpm start format.listDifferent-> passedpnpm run lint-> passedcd react_on_rails_pro/spec/dummy && pnpm exec tsc --noEmit --pretty false-> only existingtests/strict-mode-support.test.tsxstrict-mode errors; no errors from this PRpages_controller.rbandroutes.rbReview Notes
Current head:
a5b27f10f36a7d9a38e78b55ce6f896118deb37f.codex review --base origin/mainfound one actionable TypeScript strictness issue in the new paint recorder. The branch was amended to fix that by using a local initialized paint array reference, and the diagnostic was rerun. A subsequent review rerun was stopped after it crawled ignored generated build artifacts; the generated artifacts were removed and no additional source finding had been reported.Greptile P2 review comments were fixed and resolved:
waitForTargetResponse()now resolves afterroute.fulfill(...), and explicit CSS-isolation pages are closed withtry/finally.Claude review comments were fixed and resolved: paint sampling now receives each probe sentinel explicitly,
waitForTargetResponse()semantics match fulfillment timing, JS-delay tests release blocked scripts infinally, explicit pages close throughtry/finally, CSS sentinel waits have explicit 10s diagnostics, the no-visible window is named/documented as a deliberate 1s stability window, and the browser-only CSS isolation test no longer instantiates an unusedpagefixture.Current-head Codex review comments were fixed and resolved: the RSC minimal-CSS page now aborts
/rsc_payload/**so it cannot pass through the client fallback, the minimal-CSS assertions now prove each probe page excludes the opposite probe sentinel as well as the unused sentinel, andexpectNoVisiblePaint()now samples for the full stability window instead of allowing an immediate negative-assertion pass.Review churn: five follow-up review-fix pushes after the initial PR publication; each was locally validated before force-pushing with lease.
Agent coordination claim:
agent-coord claim --repo shakacode/react_on_rails --target 4033 --branch jg-codex/rsc-fouc-acceptance-tests --agent-id codex-rsc-fouc-acceptance-tests --status pr-open-local-validated --ttl 14400.Notes
Observed RSC bug evidence: the stream currently preloads the CSS chunk but swaps streamed content into the DOM before the stylesheet applies, so the probe can be visible with default computed styles or visible before the CSS response is released.
Observed client-only bug evidence: when JS is available and the CSS response is held, the client-only probe can become visible before its stylesheet is released.
Summary by CodeRabbit
Note
Low Risk
Changes are limited to the Pro dummy app routes, fixtures, and e2e tests; production rendering behavior is untouched.
Overview
Adds Pro dummy-app Playwright acceptance coverage for flash-of-unstyled-content (FOUC) under streamed RSC (
/rsc_fouc_probe) and client-only (/client_side_fouc_probe) rendering, without changing production runtime code.New probe UI uses CSS custom-property sentinels and
data-testidhooks so tests assert visible computed styles and timing (viarequestAnimationFramepaint sampling), not internal implementation.rsc_fouc.spec.tsintercepts webpack CSS/JS by matching sentinel strings in response bodies (not hashed filenames), can delay or hold assets, and blocks/rsc_payload/**on the RSC isolation case so a client fallback cannot mask results.CI-active cases include client-only content staying hidden while JS is delayed (CSS ready) and each probe route loading only its own CSS chunk (excluding an unused probe sentinel). Four scenarios that document current bugs (#4031/#4032) are marked
test.fixmeunlessREACT_ON_RAILS_RUN_PENDING_FOUC_TESTS=true.e2e-test:rscandpackage-scripts.test.jsnow includersc_fouc.spec.ts.Reviewed by Cursor Bugbot for commit a5b27f1. Bugbot is set up for automated code reviews on this repo. Configure here.