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

…26532)"" This reverts commit 314f7d3.
facebook · Apr 19, 2023 · 7eca717 · 7eca717
1 parent f923179
commit 7eca717
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 17 deletions.
diff --git a/packages/react-dom-bindings/src/client/ReactDOMHostConfig.js b/packages/react-dom-bindings/src/client/ReactDOMHostConfig.js
@@ -3333,28 +3333,34 @@ export function waitForCommitToBeReady(): null | (Function => Function) {
  // tasks to wait on.
  if (state.count > 0) {
  return commit => {
- unsuspendAfterTimeout(state);
+ // 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
+
  state.unsuspend = commit;
 
- return () => (state.unsuspend = null);
+ return () => {
+ state.unsuspend = null;
+ clearTimeout(stylesheetTimer);
+ };
  };
  }
  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('can unsuspend after a timeout even if some assets never load', async () => {
+ it('stylesheets block render, with a really long timeout', async () => {
  function App({children}) {
  return (
  <html>
@@ -3191,7 +3191,22 @@ body {
  </html>,
  );
 
- jest.advanceTimersByTime(1000);
+ // 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);
  expect(getMeaningfulChildren(document)).toEqual(
  <html>
  <head>