Fix FOUC by moving stylesheets to head (#686)

justin808 · web-flow · commit d054855004d6 · 2025-10-15T23:07:32.000-10:00
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') %>
+  <%= 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" %>
-
-  <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %>
-  <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %>
-
-  <!-- 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') %>
+  <%= 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" %>
-
-  <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %>
-  <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %>
+  <%= yield :body_content %>
 </body>
 </html>
 
