From e9b6d9866c18b0fa5e246e4e88332b75e973e231 Mon Sep 17 00:00:00 2001 From: Justin Gordon Date: 2025εΉ΄10月15ζ—₯ 14:48:39 -1000 Subject: [PATCH 1/5] Fix FOUC by moving stylesheets to head and disabling auto_load_bundle MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- app/views/layouts/application.html.erb | 2 +- config/initializers/react_on_rails.rb | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index a79a30a2..85a86f9c 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -6,6 +6,7 @@ RailsReactTutorial <%= append_stylesheet_pack_tag('stimulus-bundle') %> + <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %> <%= append_javascript_pack_tag('stimulus-bundle') %> <%= append_javascript_pack_tag('stores-registration') %> @@ -20,7 +21,6 @@ <%= react_component "Footer" %> - <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %> <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %> <%= redux_store_hydration_data %> diff --git a/app/views/layouts/stimulus_layout.html.erb b/app/views/layouts/stimulus_layout.html.erb index 1c504ee9..146a83fa 100644 --- a/app/views/layouts/stimulus_layout.html.erb +++ b/app/views/layouts/stimulus_layout.html.erb @@ -5,12 +5,18 @@ RailsReactTutorial - <%= append_stylesheet_pack_tag('stimulus-bundle') %> - <%= append_javascript_pack_tag('stimulus-bundle') %> + <%= yield :head %> + <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %> + <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %> <%= csrf_meta_tags %>

RailsReactTutorial

+ <% content_for :head do %> + <%= append_stylesheet_pack_tag('stimulus-bundle') %> + <%= append_javascript_pack_tag('stimulus-bundle') %> + <% end %> + <%= react_component "NavigationBarApp" %>
@@ -18,9 +24,6 @@
<%= react_component "Footer" %> - - <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %> - <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %>

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /

diff --git a/config/initializers/react_on_rails.rb b/config/initializers/react_on_rails.rb index fc82f6d7..2a1faceb 100644 --- a/config/initializers/react_on_rails.rb +++ b/config/initializers/react_on_rails.rb @@ -4,7 +4,7 @@ ReactOnRails.configure do |config| # Auto-registration configuration for v16 config.components_subdirectory = "ror_components" - config.auto_load_bundle = false + config.auto_load_bundle = true config.build_test_command = "RAILS_ENV=test bin/shakapacker" config.build_production_command = "RAILS_ENV=production NODE_ENV=production bin/shakapacker" From e3b0b7017720a8e461d039b7becc60ebef6a0f7e Mon Sep 17 00:00:00 2001 From: Justin Gordon Date: 2025εΉ΄10月15ζ—₯ 22:31:56 -1000 Subject: [PATCH 3/5] Attempt: Move append calls to head with yield for view-specific packs --- app/views/layouts/application.html.erb | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index fad09ee0..7dbd60bb 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -5,19 +5,16 @@ RailsReactTutorial - <%= yield :head %> + <%= append_stylesheet_pack_tag('stimulus-bundle') %> + <%= append_javascript_pack_tag('stimulus-bundle') %> + <%= append_javascript_pack_tag('stores-registration') %> + <%= yield :packs %> <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %> <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %> <%= csrf_meta_tags %> - <% content_for :head do %> - <%= append_stylesheet_pack_tag('stimulus-bundle') %> - <%= append_javascript_pack_tag('stimulus-bundle') %> - <%= append_javascript_pack_tag('stores-registration') %> - <% end %> - <%= react_component "NavigationBarApp" %>
From 5f7c02bc0a4fa1ab2cbf2b8aaeb5f2503f4f6cf4 Mon Sep 17 00:00:00 2001 From: Justin Gordon Date: 2025εΉ΄10月15ζ—₯ 22:32:27 -1000 Subject: [PATCH 4/5] Align stimulus_layout with application layout (still has execution order issue) --- app/views/layouts/stimulus_layout.html.erb | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/app/views/layouts/stimulus_layout.html.erb b/app/views/layouts/stimulus_layout.html.erb index 146a83fa..eb0bbd75 100644 --- a/app/views/layouts/stimulus_layout.html.erb +++ b/app/views/layouts/stimulus_layout.html.erb @@ -5,18 +5,15 @@ RailsReactTutorial - <%= yield :head %> + <%= append_stylesheet_pack_tag('stimulus-bundle') %> + <%= append_javascript_pack_tag('stimulus-bundle') %> + <%= yield :packs %> <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %> <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %> <%= csrf_meta_tags %> - <% content_for :head do %> - <%= append_stylesheet_pack_tag('stimulus-bundle') %> - <%= append_javascript_pack_tag('stimulus-bundle') %> - <% end %> - <%= react_component "NavigationBarApp" %>
From 4cc2aeb8c8be8c687536baea825f2ab70cf9f85e Mon Sep 17 00:00:00 2001 From: Justin Gordon Date: 2025εΉ΄10月15ζ—₯ 22:36:19 -1000 Subject: [PATCH 5/5] Fix FOUC by rendering body first to collect appends, then head with pack tags MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Solution: - Wrap body content in content_for :body_content at TOP of layout - This executes all react_component calls first, triggering auto-appends - Then render head with append calls followed by main pack tags - Finally yield body content Execution order: 1. content_for :body_content executes (all react_component auto-appends happen) 2. Explicit append_*_pack_tag calls in head 3. stylesheet_pack_tag and javascript_pack_tag in head (with all appends registered) 4. yield :body_content outputs the body Result: Stylesheets load in head, eliminating FOUC, while preserving auto_load_bundle functionality. πŸ€– Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- app/views/layouts/application.html.erb | 26 ++++++++++++---------- app/views/layouts/stimulus_layout.html.erb | 18 ++++++++------- 2 files changed, 24 insertions(+), 20 deletions(-) diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 7dbd60bb..c07a80a7 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -1,3 +1,16 @@ +<% content_for :body_content do %> + <%= react_component "NavigationBarApp" %> + +
+ <%= yield %> +
+ + <%= react_component "Footer" %> + + + <%= redux_store_hydration_data %> +<% end %> @@ -8,23 +21,12 @@ <%= append_stylesheet_pack_tag('stimulus-bundle') %> <%= append_javascript_pack_tag('stimulus-bundle') %> <%= append_javascript_pack_tag('stores-registration') %> - <%= yield :packs %> <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %> <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %> <%= csrf_meta_tags %> - <%= react_component "NavigationBarApp" %> - -
- <%= yield %> -
- - <%= react_component "Footer" %> - - - <%= redux_store_hydration_data %> + <%= yield :body_content %> diff --git a/app/views/layouts/stimulus_layout.html.erb b/app/views/layouts/stimulus_layout.html.erb index eb0bbd75..16ac315c 100644 --- a/app/views/layouts/stimulus_layout.html.erb +++ b/app/views/layouts/stimulus_layout.html.erb @@ -1,3 +1,12 @@ +<% content_for :body_content do %> + <%= react_component "NavigationBarApp" %> + +
+ <%= yield %> +
+ + <%= react_component "Footer" %> +<% end %> @@ -7,20 +16,13 @@ <%= append_stylesheet_pack_tag('stimulus-bundle') %> <%= append_javascript_pack_tag('stimulus-bundle') %> - <%= yield :packs %> <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %> <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %> <%= csrf_meta_tags %> - <%= react_component "NavigationBarApp" %> - -
- <%= yield %> -
- - <%= react_component "Footer" %> + <%= yield :body_content %>