Throttle reveals

Author: sebmarkbage

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

@@ -47,6 +47,8 @@ export function clientRenderBoundary(
   }
 }
 
+const FALLBACK_THROTTLE_MS = 300;
+
 export function completeBoundary(suspenseBoundaryID, contentID) {
   const contentNodeOuter = document.getElementById(contentID);
   if (!contentNodeOuter) {
@@ -69,6 +71,7 @@ export function completeBoundary(suspenseBoundaryID, contentID) {
   }
 
   function revealCompletedBoundaries() {
+    window['$RT'] = performance.now();
     const batch = window['$RB'];
     window['$RB'] = [];
     for (let i = 0; i < batch.length; i += 2) {
@@ -132,7 +135,18 @@ export function completeBoundary(suspenseBoundaryID, contentID) {
   // Queue this boundary for the next batch
   window['$RB'].push(suspenseIdNodeOuter, contentNodeOuter);
 
-  revealCompletedBoundaries();
+  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 msUntilTimeout =
+      globalMostRecentFallbackTime + FALLBACK_THROTTLE_MS - performance.now();
+    // 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(revealCompletedBoundaries, msUntilTimeout);
+  }
 }
 
 export function completeBoundaryWithStyles(

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

@@ -209,6 +209,7 @@ describe('ReactDOMFizzServer', () => {
     buffer = '';
 
     if (!bufferedContent) {
+      jest.runAllTimers();
       return;
     }
 
@@ -317,6 +318,8 @@ describe('ReactDOMFizzServer', () => {
       div.innerHTML = bufferedContent;
       await insertNodesAndExecuteScripts(div, streamingContainer, CSPnonce);
     }
+    // Let throttled boundaries reveal
+    jest.runAllTimers();
   }
 
   function resolveText(text) {

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

@@ -38,6 +38,9 @@ describe('ReactDOMFizzStaticBrowser', () => {
     jest.resetModules();
     JSDOM = require('jsdom').JSDOM;
 
+    // We need the mocked version of setTimeout inside the document.
+    window.setTimeout = setTimeout;
+
     Scheduler = require('scheduler');
     patchMessageChannel(Scheduler);
     act = require('internal-test-utils').act;
@@ -133,13 +136,18 @@ describe('ReactDOMFizzStaticBrowser', () => {
     const temp = document.createElement('div');
     temp.innerHTML = result;
     await insertNodesAndExecuteScripts(temp, container, null);
+    jest.runAllTimers();
   }
 
   async function readIntoNewDocument(stream) {
     const content = await readContent(stream);
-    const jsdom = new JSDOM(content, {
-      runScripts: 'dangerously',
-    });
+    const jsdom = new JSDOM(
+      // The Fizz runtime assumes requestAnimationFrame exists so we need to polyfill it.
+      '<script>window.requestAnimationFrame = setTimeout;</script>' + content,
+      {
+        runScripts: 'dangerously',
+      },
+    );
     const originalWindow = global.window;
     const originalDocument = global.document;
     const originalNavigator = global.navigator;
@@ -167,6 +175,7 @@ describe('ReactDOMFizzStaticBrowser', () => {
     const temp = document.createElement('div');
     temp.innerHTML = content;
     await insertNodesAndExecuteScripts(temp, document.body, null);
+    jest.runAllTimers();
   }
 
   it('should call prerender', async () => {
@@ -980,6 +989,7 @@ describe('ReactDOMFizzStaticBrowser', () => {
     // Wait for the instruction microtasks to flush.
     await 0;
     await 0;
+    jest.runAllTimers();
 
     expect(getVisibleChildren(container)).toEqual([
       <link href="example.com" rel="preconnect" />,

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

@@ -125,6 +125,7 @@ describe('ReactDOMFloat', () => {
     buffer = '';
 
     if (!bufferedContent) {
+      jest.runAllTimers();
       return;
     }
 
@@ -233,6 +234,9 @@ describe('ReactDOMFloat', () => {
       div.innerHTML = bufferedContent;
       await insertNodesAndExecuteScripts(div, streamingContainer, CSPnonce);
     }
+    await 0;
+    // Let throttled boundaries reveal
+    jest.runAllTimers();
   }
 
   function getMeaningfulChildren(element) {
@@ -3614,6 +3618,7 @@ body {
     assertConsoleErrorDev([
       "Hydration failed because the server rendered HTML didn't match the client.",
     ]);
+    jest.runAllTimers();
 
     expect(getMeaningfulChildren(document)).toEqual(
       <html>
@@ -5207,6 +5212,10 @@ body {
       </html>,
     );
     loadStylesheets();
+    // Let the styles flush and then flush the boundaries
+    await 0;
+    await 0;
+    jest.runAllTimers();
     assertLog([
       'load stylesheet: shell preinit/shell',
       'load stylesheet: shell/shell preinit',