Revert "[Float] Suspend unstyled content for up to 1 minute (#26532)"

This reverts commit 0ae3480.
facebook · Apr 17, 2023 · 314f7d3 · 314f7d3
1 parent adac7b1
commit 314f7d3
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 38 deletions.
diff --git a/packages/react-dom-bindings/src/client/ReactDOMHostConfig.js b/packages/react-dom-bindings/src/client/ReactDOMHostConfig.js
@@ -3333,34 +3333,28 @@ export function waitForCommitToBeReady(): null | (Function => Function) {
   // tasks to wait on.
   if (state.count > 0) {
     return commit => {
-      // We almost never want to show content before its styles have loaded. But
-      // eventually we will give up and allow unstyled content. So this number is
-      // somewhat arbitrary — big enough that you'd only reach it under
-      // extreme circumstances.
-      // TODO: Figure out what the browser engines do during initial page load and
-      // consider aligning our behavior with that.
-      const stylesheetTimer = setTimeout(() => {
-        if (state.stylesheets) {
-          insertSuspendedStylesheets(state, state.stylesheets);
-        }
-        if (state.unsuspend) {
-          const unsuspend = state.unsuspend;
-          state.unsuspend = null;
-          unsuspend();
-        }
-      }, 60000); // one minute
-
+      unsuspendAfterTimeout(state);
       state.unsuspend = commit;
 
-      return () => {
-        state.unsuspend = null;
-        clearTimeout(stylesheetTimer);
-      };
+      return () => (state.unsuspend = null);
     };
   }
   return null;
 }
 
+function unsuspendAfterTimeout(state: SuspendedState) {
+  setTimeout(() => {
+    if (state.stylesheets) {
+      insertSuspendedStylesheets(state, state.stylesheets);
+    }
+    if (state.unsuspend) {
+      const unsuspend = state.unsuspend;
+      state.unsuspend = null;
+      unsuspend();
+    }
+  }, 500);
+}
+
 function onUnsuspend(this: SuspendedState) {
   this.count--;
   if (this.count === 0) {

diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
@@ -3163,7 +3163,7 @@ body {
     );
   });
 
-  it('stylesheets block render, with a really long timeout', async () => {
+  it('can unsuspend after a timeout even if some assets never load', async () => {
     function App({children}) {
       return (
         <html>
@@ -3191,22 +3191,7 @@ body {
       </html>,
     );
 
-    // Advance time by 50 seconds. Even still, the transition is suspended.
-    jest.advanceTimersByTime(50000);
-    await waitForAll([]);
-    expect(getMeaningfulChildren(document)).toEqual(
-      <html>
-        <head>
-          <link rel="preload" href="foo" as="style" />
-        </head>
-        <body />
-      </html>,
-    );
-
-    // Advance time by 10 seconds more. A full minute total has elapsed. At this
-    // point, something must have really gone wrong, so we time out and allow
-    // unstyled content to be displayed.
-    jest.advanceTimersByTime(10000);
+    jest.advanceTimersByTime(1000);
     expect(getMeaningfulChildren(document)).toEqual(
       <html>
         <head>