[pull] main from facebook:main

fixtures/ssr/src/components/LargeContent.js

@@ -1,8 +1,4 @@
-import React, {
-  Fragment,
-  Suspense,
-  unstable_SuspenseList as SuspenseList,
-} from 'react';
+import React, {Suspense, unstable_SuspenseList as SuspenseList} from 'react';
 
 export default function LargeContent() {
   return (

packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetShared.js

@@ -420,21 +420,24 @@ export function completeBoundary(suspenseBoundaryID, contentID) {
   if (window['$RB'].length === 2) {
     // This is the first time we've pushed to the batch. We need to schedule a callback
     // to flush the batch. This is delayed by the throttle heuristic.
-    const globalMostRecentFallbackTime =
-      typeof window['$RT'] !== 'number' ? 0 : window['$RT'];
-    const currentTime = performance.now();
-    const msUntilTimeout =
-      // If the throttle would make us miss the target metric, then shorten the throttle.
-      // performance.now()'s zero value is assumed to be the start time of the metric.
-      currentTime < TARGET_VANITY_METRIC &&
-      currentTime > TARGET_VANITY_METRIC - FALLBACK_THROTTLE_MS
-        ? TARGET_VANITY_METRIC - currentTime
-        : // Otherwise it's throttled starting from last commit time.
-          globalMostRecentFallbackTime + FALLBACK_THROTTLE_MS - currentTime;
-    // We always schedule the flush in a timer even if it's very low or negative to allow
-    // for multiple completeBoundary calls that are already queued to have a chance to
-    // make the batch.
-    setTimeout(window['$RV'].bind(null, window['$RB']), msUntilTimeout);
+    if (typeof window['$RT'] !== 'number') {
+      // If we haven't had our rAF callback yet, schedule everything for the first paint.
+      requestAnimationFrame(window['$RV'].bind(null, window['$RB']));
+    } else {
+      const currentTime = performance.now();
+      const msUntilTimeout =
+        // If the throttle would make us miss the target metric, then shorten the throttle.
+        // performance.now()'s zero value is assumed to be the start time of the metric.
+        currentTime < TARGET_VANITY_METRIC &&
+        currentTime > TARGET_VANITY_METRIC - FALLBACK_THROTTLE_MS
+          ? TARGET_VANITY_METRIC - currentTime
+          : // Otherwise it's throttled starting from last commit time.
+            window['$RT'] + FALLBACK_THROTTLE_MS - currentTime;
+      // We always schedule the flush in a timer even if it's very low or negative to allow
+      // for multiple completeBoundary calls that are already queued to have a chance to
+      // make the batch.
+      setTimeout(window['$RV'].bind(null, window['$RB']), msUntilTimeout);
+    }
   }
 }
 

packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js

@@ -40,6 +40,7 @@ describe('ReactDOMFizzStaticBrowser', () => {
 
     // We need the mocked version of setTimeout inside the document.
     window.setTimeout = setTimeout;
+    window.requestAnimationFrame = setTimeout;
 
     patchMessageChannel();
     serverAct = require('internal-test-utils').serverAct;