From fcaf7f1ad2b054f61b2aae553421bcfc906c8c94 Mon Sep 17 00:00:00 2001 From: Justin Gordon Date: Tue, 14 Oct 2025 12:39:52 -1000 Subject: [PATCH] Fix FOUC by moving stylesheet loading to head section MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The stylesheet_pack_tag was loading at the bottom of the body, causing a flash of unstyled content (FOUC) as React components rendered before CSS loaded. Moving it to the head ensures styles are loaded before content renders. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- app/views/layouts/application.html.erb | 2 +- app/views/layouts/stimulus_layout.html.erb | 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) %>