Skip to content

Fix FOUC in Pro spec/dummy app with critical CSS #2132

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fix FOUC in Pro spec/dummy app with critical CSS #2132

wants to merge 1 commit into from

Conversation

@justin808
Copy link
Member

@justin808 justin808 commented Nov 26, 2025

Summary

  • Inline critical CSS styles in the <head> to prevent Flash of Unstyled Content (FOUC) on initial page load
  • Add CSS preload hint for client-bundle.css for faster loading

Problem

The Pro spec/dummy app exhibited severe FOUC where:

  1. Completely unstyled HTML appeared with no layout/formatting
  2. Layout jumped when CSS finally loaded and applied
  3. This undermined confidence in the library's production-readiness

Solution

Following the recommended approach from #2100, this PR:

  1. Inlines critical layout CSS (~50 lines) for immediate rendering
  2. Adds preload hint for faster CSS delivery
  3. Keeps async: true on JavaScript (correct for React 18 Selective Hydration)

The inlined CSS covers:

  • Flex layout classes (flex, flex-row, flex-col, flex-1)
  • Screen dimensions (h-screen, w-screen)
  • Sidebar dimensions (min-w-[400px], max-w-[400px])
  • Background colors (bg-slate-100, bg-white)
  • Borders (border-solid, border-r-2, border-slate-700)
  • Spacing (p-5, px-2)
  • Overflow handling (overflow-y-auto, overflow-x-hidden)
  • Typography (text-red-700, underline)

Test plan

  • Run bin/dev in react_on_rails_pro/spec/dummy
  • Open browser with network throttling (Slow 3G)
  • Load any page - verify no unstyled flash before CSS applies
  • Verify layout appears correctly immediately on page load

Fixes #2100

🤖 Generated with Claude Code

@justin808 @claude
Fix FOUC in Pro spec/dummy app with critical CSS
afbe8fa 
Inline critical CSS styles in the <head> to prevent Flash of
Unstyled Content (FOUC) on initial page load. This ensures the
two-column layout renders correctly before the main CSS loads.

Changes:
- Add inlined critical CSS for flex layout, sidebar dimensions,
  colors, spacing, and overflow handling
- Add preload hint for client-bundle.css for faster loading

This matches Tailwind class definitions used in the layout structure
so the page has proper layout even before full CSS loads.

Fixes #2100

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Nov 26, 2025

Warning

Rate limit exceeded

@justin808 has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 25 minutes and 43 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between 16b3908 and afbe8fa.

📒 Files selected for processing (1)
  • react_on_rails_pro/spec/dummy/app/views/layouts/application.html.erb (1 hunks)
✨ Finishing touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch jg/fix-pro-dummy-fouc

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@justin808
Copy link
Member Author

justin808 commented Nov 26, 2025

@Judahmeek You can pick this one up. Don't merge unless you verify.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Pro spec/dummy app has severe FOUC (Flash of Unstyled Content)

2 participants

@justin808