Fix component registration race condition with defer loading strategy (#1972)

## Problem

CI tests were failing intermittently with component registration errors:


This was caused by a race condition where React hydration started before
component registrations completed.

## Root Cause

With  script loading (default on Shakapacker >= 8.2.0):
- Both  and generated component packs used 
- Scripts execute as soon as downloaded, in **any order**
- When main bundle executed first, React couldn't find registered
components

## Solution

Changed default loading strategy to  for deterministic execution order:

1. **Configuration** - Default  to  (was )
2. **Layout** - Use  for  (was conditional async/defer)
3. **Result** - Scripts execute in DOM order after HTML parsing

With :
- All scripts download in parallel (fast)
- Execute in DOM order after parsing
- Generated component packs execute before main bundle
- Component registrations complete before React hydration

## Testing

Fixes CI failures in:
- spec/system/integration_spec.rb[1:1:6:1:2]
- spec/system/integration_spec.rb[1:1:6:2:2]

## Files Changed

- `lib/react_on_rails/configuration.rb` - Changed default strategy to
:defer
- `spec/dummy/app/views/layouts/application.html.erb` - Always use defer
for client-bundle
- `spec/dummy/config/initializers/react_on_rails.rb` - Updated comments

---

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

<!-- Reviewable:start -->
- - -
This change is [<img src="https://reviewable.io/review_button.svg"
height="34" align="absmiddle"
alt="Reviewable"/>](https://reviewable.io/reviews/shakacode/react_on_rails/1972)
<!-- Reviewable:end -->


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
* Fixed component registration timing to ensure completion before
hydration

* **Refactor**
* Simplified component loading strategy to consistently use defer
behavior
* Removed automatic async loading detection for more predictable
configuration

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: justin808

lib/react_on_rails/configuration.rb

@@ -154,9 +154,9 @@ def check_component_registry_timeout
       raise ReactOnRails::Error, "component_registry_timeout must be a positive integer"
     end
 
-    # rubocop:disable Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity
+    # rubocop:disable Metrics/CyclomaticComplexity
     def validate_generated_component_packs_loading_strategy
-      # rubocop:enable Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity
+      # rubocop:enable Metrics/CyclomaticComplexity
 
       if defer_generated_component_packs
         if %i[async sync].include?(generated_component_packs_loading_strategy)
@@ -176,12 +176,11 @@ def validate_generated_component_packs_loading_strategy
         1. Use :sync or :defer loading strategy instead of :async
         2. Upgrade to Shakapacker v8.2.0 or above to enable async script loading
       MSG
-      if PackerUtils.supports_async_loading?
-        self.generated_component_packs_loading_strategy ||= :async
-      elsif generated_component_packs_loading_strategy.nil?
-        Rails.logger.warn("**WARNING** #{msg}")
-        self.generated_component_packs_loading_strategy = :sync
-      elsif generated_component_packs_loading_strategy == :async
+      if generated_component_packs_loading_strategy.nil?
+        # Use defer as the default to ensure generated component packs load and register
+        # components before main bundle executes, avoiding race conditions with async loading
+        self.generated_component_packs_loading_strategy = :defer
+      elsif generated_component_packs_loading_strategy == :async && !PackerUtils.supports_async_loading?
         raise ReactOnRails::Error, "**ERROR** #{msg}"
       end
 

spec/dummy/app/views/layouts/application.html.erb

@@ -9,16 +9,10 @@
 
   <%= yield :head %>
 
-  <%# Conditionally use defer: true for pages with Redux shared stores (inline registration).
-      Modern apps should use async: true for optimal performance. See docs for details:
-      docs/building-features/streaming-server-rendering.md %>
-  <% if uses_redux_shared_store? %>
-    <%# defer: true required for Redux shared stores with inline component registration %>
-    <%= javascript_pack_tag('client-bundle', 'data-turbo-track': 'reload', defer: true) %>
-  <% else %>
-    <%# async: true is the recommended approach for modern apps (Shakapacker >= 8.2.0) %>
-    <%= javascript_pack_tag('client-bundle', 'data-turbo-track': 'reload', async: true) %>
-  <% end %>
+  <%# Use defer: true to ensure proper script execution order.
+      When using generated component packs (auto_load_bundle), defer ensures
+      component registrations complete before React hydration begins. %>
+  <%= javascript_pack_tag('client-bundle', 'data-turbo-track': 'reload', defer: true) %>
 
   <%= csrf_meta_tags %>
 </head>

spec/dummy/config/initializers/react_on_rails.rb

@@ -42,5 +42,6 @@ def self.adjust_props_for_client_side_hydration(component_name, props)
   config.components_subdirectory = "startup"
   config.auto_load_bundle = true
   config.immediate_hydration = false
-  config.generated_component_packs_loading_strategy = :defer
+  # Don't explicitly set generated_component_packs_loading_strategy - let it default to :defer
+  # which ensures generated component packs load and register components before main bundle executes
 end

spec/react_on_rails/configuration_spec.rb

@@ -284,9 +284,9 @@ module ReactOnRails
             .with("8.2.0").and_return(true)
         end
 
-        it "defaults to :async" do
+        it "defaults to :defer" do
           ReactOnRails.configure {} # rubocop:disable Lint/EmptyBlock
-          expect(ReactOnRails.configuration.generated_component_packs_loading_strategy).to eq(:async)
+          expect(ReactOnRails.configuration.generated_component_packs_loading_strategy).to eq(:defer)
         end
 
         it "accepts :async value" do
@@ -332,10 +332,9 @@ module ReactOnRails
           allow(Rails.logger).to receive(:warn)
         end
 
-        it "defaults to :sync and logs a warning" do
+        it "defaults to :defer" do
           ReactOnRails.configure {} # rubocop:disable Lint/EmptyBlock
-          expect(ReactOnRails.configuration.generated_component_packs_loading_strategy).to eq(:sync)
-          expect(Rails.logger).to have_received(:warn).with(/does not support async script loading/)
+          expect(ReactOnRails.configuration.generated_component_packs_loading_strategy).to eq(:defer)
         end
 
         it "accepts :defer value" do