Add async components demo with concurrent rendering example

Author: AbanoubGhadban

react_on_rails_pro/spec/dummy/app/controllers/pages_controller.rb

@@ -3,6 +3,9 @@
 class PagesController < ApplicationController # rubocop:disable Metrics/ClassLength
   include ReactOnRailsPro::RSCPayloadRenderer
   include RscPostsPageOverRedisHelper
+  include ReactOnRailsPro::AsyncRendering
+
+  enable_async_react_rendering only: [:async_components_demo]
 
   XSS_PAYLOAD = { "<script>window.alert('xss1');</script>" => '<script>window.alert("xss2");</script>' }.freeze
   PROPS_NAME = "Mr. Server Side Rendering"
@@ -157,6 +160,12 @@ def console_logs_in_async_server
     render "/pages/pro/console_logs_in_async_server"
   end
 
+  # Demo page showing 10 async components rendering concurrently
+  # Each component delays 1 second - sequential would take ~10s, concurrent takes ~1s
+  def async_components_demo
+    render "/pages/pro/async_components_demo"
+  end
+
   # See files in spec/dummy/app/views/pages
 
   helper_method :calc_slow_app_props_server_render

react_on_rails_pro/spec/dummy/app/views/pages/pro/async_components_demo.html.erb

@@ -0,0 +1,34 @@
+<h1>Async React Components Demo</h1>
+<p>
+  This page renders 10 React components, each with a 1-second delay.
+  <br>
+  <strong>Sequential rendering:</strong> ~10 seconds
+  <br>
+  <strong>Concurrent rendering (async_react_component):</strong> ~1 second
+</p>
+
+<% start_time = Time.now %>
+
+<%
+  # Start all 10 async renders immediately (non-blocking)
+  components = 10.times.map do |i|
+    async_react_component(
+      "DelayedComponent",
+      props: { index: i + 1, delayMs: 1000 },
+      prerender: true
+    )
+  end
+%>
+
+<div id="components-container">
+  <% components.each do |component| %>
+    <%= component.value %>
+  <% end %>
+</div>
+
+<% elapsed = Time.now - start_time %>
+<p>
+  <strong>Total render time:</strong> <%= (elapsed * 1000).round %>ms
+  <br>
+  <em>If this is close to 1 second instead of 10 seconds, concurrent rendering is working!</em>
+</p>

react_on_rails_pro/spec/dummy/client/app/ror-auto-load-components/DelayedComponent.client.jsx

@@ -0,0 +1,12 @@
+'use client';
+
+import React from 'react';
+
+// Client-side version of DelayedComponent (no delay needed on client)
+const DelayedComponent = ({ index, delayMs = 1000 }) => (
+  <div style={{ padding: '10px', margin: '5px', border: '1px solid #ccc' }}>
+    <strong>Component {index}</strong> - Rendered after {delayMs}ms delay
+  </div>
+);
+
+export default DelayedComponent;

react_on_rails_pro/spec/dummy/client/app/ror-auto-load-components/DelayedComponent.server.jsx

@@ -0,0 +1,21 @@
+'use client';
+
+import React from 'react';
+
+// Component that simulates a slow render by delaying for 1 second
+// Used to demonstrate concurrent rendering with async_react_component
+const DelayedComponent = ({ index, delayMs = 1000 }) => (
+  <div style={{ padding: '10px', margin: '5px', border: '1px solid #ccc' }}>
+    <strong>Component {index}</strong> - Rendered after {delayMs}ms delay
+  </div>
+);
+
+// Async render function that delays for specified time before returning
+export default async (props, _railsContext) => {
+  const { delayMs = 1000 } = props;
+
+  // Simulate slow server-side data fetching
+  await new Promise((resolve) => setTimeout(resolve, delayMs));
+
+  return () => <DelayedComponent {...props} />;
+};

react_on_rails_pro/spec/dummy/config/routes.rb

@@ -38,6 +38,7 @@
   get "server_router_client_render/(*all)" => "pages#server_router_client_render", as: :server_router_client_render
   get "async_render_function_returns_string" => "pages#async_render_function_returns_string"
   get "async_render_function_returns_component" => "pages#async_render_function_returns_component"
+  get "async_components_demo" => "pages#async_components_demo", as: :async_components_demo
   rsc_payload_route controller: "pages"
 
   # routes copied over from react on rails