Wrap RSCRoute in local Suspense to prevent whole-page collapse

Without a local Suspense boundary, RSCRoute's in-flight fetch
suspension bubbles up to whatever outer Suspense the Pro
stream_react_component infrastructure provides. That outer fallback
wipes the entire rendered tree, so during a Refresh or Simulate Error
click, the whole page collapsed to viewport height for ~500ms and the
browser snapped scrollY to 0 (since the page wasn't tall enough to
preserve the prior scroll position).

Verified empirically via window.scrollY + document.body.scrollHeight
sampling on the deployed review-app: pre-fix, pageHeight went from
2193px to 764px between +50ms and +500ms after click. Local Suspense
boundary contains the suspension to the LiveActivity section; same-
shape skeleton fallback keeps the section's height stable so the
surrounding layout doesn't shift.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: ihabadham

client/app/bundles/server-components/components/LiveActivityRefresher.jsx

@@ -1,10 +1,28 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useState, Suspense } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import RSCRoute from 'react-on-rails-pro/RSCRoute';
 import { useRSC } from 'react-on-rails-pro/RSCProvider';
 
+// Same shape and dimensions as the rendered LiveActivity card. Local Suspense
+// fallback prevents the RSCRoute suspension from bubbling to an outer
+// boundary, which would collapse the whole page during in-flight fetches.
+const ActivityCardSkeleton = () => (
+  <div className="bg-gradient-to-br from-indigo-50 to-purple-50 border border-indigo-200 rounded-xl p-5">
+    <div className="grid grid-cols-3 gap-4 text-sm">
+      {['Server Time', 'Free RAM', 'Uptime (hrs)'].map((label) => (
+        <div key={label}>
+          <div className="text-xs text-indigo-600 font-medium uppercase tracking-wide mb-1">
+            {label}
+          </div>
+          <div className="font-mono text-indigo-300 animate-pulse">—</div>
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
 const LiveActivityRefresher = () => {
   const [refreshKey, setRefreshKey] = useState(0);
   const [simulateError, setSimulateError] = useState(false);
@@ -67,7 +85,9 @@ const LiveActivityRefresher = () => {
         )}
         resetKeys={[refreshKey]}
       >
-        <RSCRoute componentName="LiveActivity" componentProps={{ simulateError, refreshKey }} />
+        <Suspense fallback={<ActivityCardSkeleton />}>
+          <RSCRoute componentName="LiveActivity" componentProps={{ simulateError, refreshKey }} />
+        </Suspense>
       </ErrorBoundary>
     </div>
   );