Fix Pro dummy app Playwright test timeouts by aligning with defer loading strategy

Apply the same defer loading strategy fix from commit d1a8a1a to the Pro dummy app
to resolve race condition causing Playwright test timeouts.

## Problem
Playwright E2E tests for streaming were timing out waiting for console message
"ToggleContainer with title", indicating React components weren't hydrating.

## Root Cause
The Pro dummy app was still using async: true for javascript_pack_tag while the
open-source dummy app was updated to defer: true in commit d1a8a1a. This created
a race condition where:
- Generated component packs load asynchronously
- Main client-bundle also loads asynchronously
- If client-bundle executes before component registrations complete, React tries
  to hydrate unregistered components
- ToggleContainer never hydrates, useEffect never runs, console.log never fires

## Solution
1. Changed javascript_pack_tag from async: true to defer: true in application.html.erb
2. Added precompile_hook to shakapacker.yml for pack generation
3. Added bin/shakapacker-precompile-hook script

Using defer: true ensures script execution order - generated component packs load
and register components before main bundle executes, preventing the race condition.

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

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

Author: justin808

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

@@ -24,13 +24,12 @@
                           media: 'all',
                           'data-turbo-track': 'reload') %>
 
-  <%# async: true is the recommended approach for Shakapacker >= 8.2.0 (currently using 9.3.0).
-      It enables React 18's Selective Hydration and provides optimal Time to Interactive (TTI).
-      Use immediate_hydration feature to control hydration timing for Selective/Immediate Hydration.
-      See docs/building-features/streaming-server-rendering.md
+  <%# 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.
       skip_js_packs param is used for testing purposes to simulate hydration failure %>
   <% unless params[:skip_js_packs] == 'true' %>
-    <%= javascript_pack_tag('client-bundle', 'data-turbo-track': 'reload', async: true) %>
+    <%= javascript_pack_tag('client-bundle', 'data-turbo-track': 'reload', defer: true) %>
   <% end %>
   <%= csrf_meta_tags %>
 </head>

react_on_rails_pro/spec/dummy/bin/shakapacker-precompile-hook

@@ -0,0 +1,101 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+# Shakapacker precompile hook
+# This script runs before Shakapacker compilation in both development and production.
+# See: https://github.com/shakacode/shakapacker/blob/main/docs/precompile_hook.md
+
+require "fileutils"
+
+# Find Rails root by walking upward looking for config/environment.rb
+def find_rails_root
+  dir = Dir.pwd
+  loop do
+    return dir if File.exist?(File.join(dir, "config", "environment.rb"))
+
+    parent = File.dirname(dir)
+    return nil if parent == dir # Reached filesystem root
+
+    dir = parent
+  end
+end
+
+# Build ReScript if needed
+def build_rescript_if_needed
+  # Check for both old (bsconfig.json) and new (rescript.json) config files
+  return unless File.exist?("bsconfig.json") || File.exist?("rescript.json")
+
+  puts "🔧 Building ReScript..."
+
+  # Cross-platform package manager detection
+  yarn_available = system("yarn", "--version", out: File::NULL, err: File::NULL)
+  npm_available = system("npm", "--version", out: File::NULL, err: File::NULL)
+
+  success = if yarn_available
+              system("yarn", "build:rescript")
+            elsif npm_available
+              system("npm", "run", "build:rescript")
+            else
+              warn "⚠️  Warning: Neither yarn nor npm found. Skipping ReScript build."
+              return
+            end
+
+  if success
+    puts "✅ ReScript build completed successfully"
+  else
+    warn "❌ ReScript build failed"
+    exit 1
+  end
+end
+
+# Generate React on Rails packs if needed
+# rubocop:disable Metrics/CyclomaticComplexity
+def generate_packs_if_needed
+  # Find Rails root directory
+  rails_root = find_rails_root
+  return unless rails_root
+
+  # Check if React on Rails initializer exists
+  initializer_path = File.join(rails_root, "config", "initializers", "react_on_rails.rb")
+  return unless File.exist?(initializer_path)
+
+  # Check if auto-pack generation is configured (match actual config assignments, not comments)
+  config_file = File.read(initializer_path)
+  # Match uncommented configuration lines only (lines not starting with #)
+  has_auto_load = config_file =~ /^\s*(?!#).*config\.auto_load_bundle\s*=/
+  has_components_subdir = config_file =~ /^\s*(?!#).*config\.components_subdirectory\s*=/
+  return unless has_auto_load || has_components_subdir
+
+  puts "📦 Generating React on Rails packs..."
+
+  # Cross-platform bundle availability check
+  bundle_available = system("bundle", "--version", out: File::NULL, err: File::NULL)
+  return unless bundle_available
+
+  # Check if rake task exists (use array form for security)
+  task_list = IO.popen(["bundle", "exec", "rails", "-T"], err: [:child, :out], &:read)
+  return unless task_list.include?("react_on_rails:generate_packs")
+
+  # Use array form for better cross-platform support
+  success = system("bundle", "exec", "rails", "react_on_rails:generate_packs")
+
+  if success
+    puts "✅ Pack generation completed successfully"
+  else
+    warn "❌ Pack generation failed"
+    exit 1
+  end
+end
+# rubocop:enable Metrics/CyclomaticComplexity
+
+# Main execution
+begin
+  build_rescript_if_needed
+  generate_packs_if_needed
+
+  exit 0
+rescue StandardError => e
+  warn "❌ Precompile hook failed: #{e.message}"
+  warn e.backtrace.join("\n")
+  exit 1
+end

react_on_rails_pro/spec/dummy/config/shakapacker.yml

@@ -19,6 +19,11 @@ default: &default
   # Reload manifest.json on all requests so we reload latest compiled packs
   cache_manifest: false
 
+  # Hook to run before webpack compilation (e.g., for generating dynamic entry points)
+  # SECURITY: Only reference trusted scripts within your project. Ensure the hook path
+  # points to a file within the project root that you control.
+  precompile_hook: 'bin/shakapacker-precompile-hook'
+
   # Extract and emit a css file
   extract_css: true