Fix FOUC by rendering body first to collect appends, then head with pack tags

justin808 · claude · justin808 · commit 4cc2aeb8c8be · 2025-10-15T22:36:19.000-10:00
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 <noreply@anthropic.com>
diff --git 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" %>
+
+  <div class="container mx-auto px-4 flex-grow">
+    <%= yield %>
+  </div>
+
+  <%= react_component "Footer" %>
+
+  <!-- This is a placeholder for ReactOnRails to know where to render the store props for
+      client side hydration -->
+  <%= redux_store_hydration_data %>
+<% end %>
 <!DOCTYPE html>
 <html>
 <head>
@@ -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 %>
 </head>
 <body class="min-h-screen flex flex-col bg-sky-50 text-gray-700">
-  <%= react_component "NavigationBarApp" %>
-
-  <div class="container mx-auto px-4 flex-grow">
-    <%= yield %>
-  </div>
-
-  <%= react_component "Footer" %>
-
-  <!-- This is a placeholder for ReactOnRails to know where to render the store props for
-      client side hydration -->
-  <%= redux_store_hydration_data %>
+  <%= yield :body_content %>
 </body>
 </html>
diff --git 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" %>
+
+  <div class="container mx-auto px-4 flex-grow">
+    <%= yield %>
+  </div>
+
+  <%= react_component "Footer" %>
+<% end %>
 <!DOCTYPE html>
 <html>
 <head>
@@ -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 %>
 </head>
 <body class="min-h-screen flex flex-col bg-sky-50 text-gray-700">
-  <%= react_component "NavigationBarApp" %>
-
-  <div class="container mx-auto px-4 flex-grow">
-    <%= yield %>
-  </div>
-
-  <%= react_component "Footer" %>
+  <%= yield :body_content %>
 </body>
 </html>
 
