Skip to content

Commit bfb4db4

Browse files
justin808claude
andcommitted
Fix FOUC by moving stylesheets to head and disabling auto_load_bundle
Problem: - Stylesheets were loading at bottom of body, causing FOUC with SSR - Moving stylesheet_pack_tag to head failed because react_component with auto_load_bundle=true would call append_stylesheet_pack_tag during rendering, which must come before stylesheet_pack_tag Solution: - Set auto_load_bundle = false in react_on_rails config - Manually specify required packs in layout (stimulus-bundle) - Move stylesheet_pack_tag to head after append calls - This ensures styles load before content renders, preventing FOUC 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent ec52aa1 commit bfb4db4

File tree

2 files changed

+2
-2
lines changed

2 files changed

+2
-2
lines changed

app/views/layouts/application.html.erb

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<title>RailsReactTutorial</title>
77

88
<%= append_stylesheet_pack_tag('stimulus-bundle') %>
9+
<%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %>
910
<%= append_javascript_pack_tag('stimulus-bundle') %>
1011
<%= append_javascript_pack_tag('stores-registration') %>
1112

@@ -20,7 +21,6 @@
2021

2122
<%= react_component "Footer" %>
2223

23-
<%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %>
2424
<%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %>
2525

2626
<!-- This is a placeholder for ReactOnRails to know where to render the store props for

config/initializers/react_on_rails.rb

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
ReactOnRails.configure do |config|
55
# Auto-registration configuration for v16
66
config.components_subdirectory = "ror_components"
7-
config.auto_load_bundle = true
7+
config.auto_load_bundle = false
88

99
config.build_test_command = "RAILS_ENV=test bin/shakapacker"
1010
config.build_production_command = "RAILS_ENV=production NODE_ENV=production bin/shakapacker"

0 commit comments

Comments
 (0)