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

We almost never want to show content before its styles have loaded. But eventually we will give up and allow unstyled content. So this extends the timeout to a full minute. This somewhat arbitrary — big enough that you'd only reach it under extreme circumstances. Note that, like regular Suspense, the app is still interactive while we're waiting for content to load. Only the unstyled content is blocked from appearing, not updates in general. A new update will interrupt it. We should figure out what the browser engines do during initial page load and consider aligning our behavior with that. It's supposed to be render blocking by default but there may be some cases where they, too, give up and FOUC. DiffTrain build for [0ae3480](0ae3480)
facebook · Mar 31, 2023 · e1d88e6 · e1d88e6
1 parent 32a8c3b
commit e1d88e6
Show file tree

Hide file tree

Showing 15 changed files with 174 additions and 164 deletions.
diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION
@@ -1 +1 @@
-888874673f81c08d9c3cfd4a56e2e93fd728894c
+0ae348018d5b3a3f1ccdd92de85d9cc581b2b98d
diff --git a/compiled/facebook-www/React-dev.modern.js b/compiled/facebook-www/React-dev.modern.js
@@ -27,7 +27,7 @@ if (
 }
  "use strict";
 
-var ReactVersion = "18.3.0-www-modern-c4354f6b";
+var ReactVersion = "18.3.0-www-modern-01f5e12b";
 
 // ATTENTION
 // When adding new symbols to this file,

diff --git a/compiled/facebook-www/ReactART-dev.classic.js b/compiled/facebook-www/ReactART-dev.classic.js
@@ -69,7 +69,7 @@ function _assertThisInitialized(self) {
  return self;
 }
 
-var ReactVersion = "18.3.0-www-classic-eed36d56";
+var ReactVersion = "18.3.0-www-classic-69b188ab";
 
 var LegacyRoot = 0;
 var ConcurrentRoot = 1;

diff --git a/compiled/facebook-www/ReactART-prod.modern.js b/compiled/facebook-www/ReactART-prod.modern.js
@@ -9723,7 +9723,7 @@ var slice = Array.prototype.slice,
  return null;
  },
  bundleType: 0,
- version: "18.3.0-www-modern-15f5d624",
+ version: "18.3.0-www-modern-944376ad",
  rendererPackageName: "react-art"
  };
 var internals$jscomp$inline_1322 = {
@@ -9754,7 +9754,7 @@ var internals$jscomp$inline_1322 = {
  scheduleRoot: null,
  setRefreshHandler: null,
  getCurrentFiber: null,
- reconcilerVersion: "18.3.0-www-modern-15f5d624"
+ reconcilerVersion: "18.3.0-www-modern-944376ad"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
  var hook$jscomp$inline_1323 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

diff --git a/compiled/facebook-www/ReactDOM-dev.classic.js b/compiled/facebook-www/ReactDOM-dev.classic.js
@@ -33880,7 +33880,7 @@ function createFiberRoot(
  return root;
 }
 
-var ReactVersion = "18.3.0-www-classic-d91df09f";
+var ReactVersion = "18.3.0-www-classic-69c1612b";
 
 function createPortal$1(
  children,
@@ -43139,31 +43139,35 @@ function waitForCommitToBeReady() {
 
  if (state.count > 0) {
  return function (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.
+ var stylesheetTimer = setTimeout(function () {
+ if (state.stylesheets) {
+ insertSuspendedStylesheets(state, state.stylesheets);
+ }
+
+ if (state.unsuspend) {
+ var unsuspend = state.unsuspend;
+ state.unsuspend = null;
+ unsuspend();
+ }
+ }, 60000); // one minute
+
  state.unsuspend = commit;
  return function () {
- return (state.unsuspend = null);
+ state.unsuspend = null;
+ clearTimeout(stylesheetTimer);
  };
  };
  }
 
  return null;
 }
 
-function unsuspendAfterTimeout(state) {
- setTimeout(function () {
- if (state.stylesheets) {
- insertSuspendedStylesheets(state, state.stylesheets);
- }
-
- if (state.unsuspend) {
- var unsuspend = state.unsuspend;
- state.unsuspend = null;
- unsuspend();
- }
- }, 500);
-}
-
 function onUnsuspend() {
  this.count--;
 

diff --git a/compiled/facebook-www/ReactDOM-dev.modern.js b/compiled/facebook-www/ReactDOM-dev.modern.js
@@ -33719,7 +33719,7 @@ function createFiberRoot(
  return root;
 }
 
-var ReactVersion = "18.3.0-www-modern-15f5d624";
+var ReactVersion = "18.3.0-www-modern-944376ad";
 
 function createPortal$1(
  children,
@@ -43687,31 +43687,35 @@ function waitForCommitToBeReady() {
 
  if (state.count > 0) {
  return function (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.
+ var stylesheetTimer = setTimeout(function () {
+ if (state.stylesheets) {
+ insertSuspendedStylesheets(state, state.stylesheets);
+ }
+
+ if (state.unsuspend) {
+ var unsuspend = state.unsuspend;
+ state.unsuspend = null;
+ unsuspend();
+ }
+ }, 60000); // one minute
+
  state.unsuspend = commit;
  return function () {
- return (state.unsuspend = null);
+ state.unsuspend = null;
+ clearTimeout(stylesheetTimer);
  };
  };
  }
 
  return null;
 }
 
-function unsuspendAfterTimeout(state) {
- setTimeout(function () {
- if (state.stylesheets) {
- insertSuspendedStylesheets(state, state.stylesheets);
- }
-
- if (state.unsuspend) {
- var unsuspend = state.unsuspend;
- state.unsuspend = null;
- unsuspend();
- }
- }, 500);
-}
-
 function onUnsuspend() {
  this.count--;
 

diff --git a/compiled/facebook-www/ReactDOM-prod.classic.js b/compiled/facebook-www/ReactDOM-prod.classic.js
@@ -15070,24 +15070,23 @@ function waitForCommitToBeReady() {
  insertSuspendedStylesheets(state, state.stylesheets);
  return 0 < state.count
  ? function (commit) {
- unsuspendAfterTimeout(state);
+ var stylesheetTimer = setTimeout(function () {
+ state.stylesheets &&
+ insertSuspendedStylesheets(state, state.stylesheets);
+ if (state.unsuspend) {
+ var unsuspend = state.unsuspend;
+ state.unsuspend = null;
+ unsuspend();
+ }
+ }, 6e4);
  state.unsuspend = commit;
  return function () {
- return (state.unsuspend = null);
+ state.unsuspend = null;
+ clearTimeout(stylesheetTimer);
  };
  }
  : null;
 }
-function unsuspendAfterTimeout(state) {
- setTimeout(function () {
- state.stylesheets && insertSuspendedStylesheets(state, state.stylesheets);
- if (state.unsuspend) {
- var unsuspend = state.unsuspend;
- state.unsuspend = null;
- unsuspend();
- }
- }, 500);
-}
 function onUnsuspend() {
  this.count--;
  if (0 === this.count)
@@ -15958,7 +15957,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1810 = {
  findFiberByHostInstance: getClosestInstanceFromNode,
  bundleType: 0,
- version: "18.3.0-www-classic-ecc92a93",
+ version: "18.3.0-www-classic-edf1acce",
  rendererPackageName: "react-dom"
 };
 var internals$jscomp$inline_2206 = {
@@ -15988,7 +15987,7 @@ var internals$jscomp$inline_2206 = {
  scheduleRoot: null,
  setRefreshHandler: null,
  getCurrentFiber: null,
- reconcilerVersion: "18.3.0-www-classic-ecc92a93"
+ reconcilerVersion: "18.3.0-www-classic-edf1acce"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
  var hook$jscomp$inline_2207 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -16228,4 +16227,4 @@ exports.unstable_renderSubtreeIntoContainer = function (
  );
 };
 exports.unstable_runWithPriority = runWithPriority;
-exports.version = "18.3.0-www-classic-ecc92a93";
+exports.version = "18.3.0-www-classic-edf1acce";
diff --git a/compiled/facebook-www/ReactDOM-prod.modern.js b/compiled/facebook-www/ReactDOM-prod.modern.js
@@ -15319,24 +15319,23 @@ function waitForCommitToBeReady() {
  insertSuspendedStylesheets(state, state.stylesheets);
  return 0 < state.count
  ? function (commit) {
- unsuspendAfterTimeout(state);
+ var stylesheetTimer = setTimeout(function () {
+ state.stylesheets &&
+ insertSuspendedStylesheets(state, state.stylesheets);
+ if (state.unsuspend) {
+ var unsuspend = state.unsuspend;
+ state.unsuspend = null;
+ unsuspend();
+ }
+ }, 6e4);
  state.unsuspend = commit;
  return function () {
- return (state.unsuspend = null);
+ state.unsuspend = null;
+ clearTimeout(stylesheetTimer);
  };
  }
  : null;
 }
-function unsuspendAfterTimeout(state) {
- setTimeout(function () {
- state.stylesheets && insertSuspendedStylesheets(state, state.stylesheets);
- if (state.unsuspend) {
- var unsuspend = state.unsuspend;
- state.unsuspend = null;
- unsuspend();
- }
- }, 500);
-}
 function onUnsuspend() {
  this.count--;
  if (0 === this.count)
@@ -15485,7 +15484,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1768 = {
  findFiberByHostInstance: getClosestInstanceFromNode,
  bundleType: 0,
- version: "18.3.0-www-modern-1b7cf3c0",
+ version: "18.3.0-www-modern-0c23841c",
  rendererPackageName: "react-dom"
 };
 var internals$jscomp$inline_2169 = {
@@ -15516,7 +15515,7 @@ var internals$jscomp$inline_2169 = {
  scheduleRoot: null,
  setRefreshHandler: null,
  getCurrentFiber: null,
- reconcilerVersion: "18.3.0-www-modern-1b7cf3c0"
+ reconcilerVersion: "18.3.0-www-modern-0c23841c"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
  var hook$jscomp$inline_2170 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -15685,4 +15684,4 @@ exports.unstable_createEventHandle = function (type, options) {
  return eventHandle;
 };
 exports.unstable_runWithPriority = runWithPriority;
-exports.version = "18.3.0-www-modern-1b7cf3c0";
+exports.version = "18.3.0-www-modern-0c23841c";
diff --git a/compiled/facebook-www/ReactDOM-profiling.classic.js b/compiled/facebook-www/ReactDOM-profiling.classic.js
@@ -15844,24 +15844,23 @@ function waitForCommitToBeReady() {
  insertSuspendedStylesheets(state, state.stylesheets);
  return 0 < state.count
  ? function (commit) {
- unsuspendAfterTimeout(state);
+ var stylesheetTimer = setTimeout(function () {
+ state.stylesheets &&
+ insertSuspendedStylesheets(state, state.stylesheets);
+ if (state.unsuspend) {
+ var unsuspend = state.unsuspend;
+ state.unsuspend = null;
+ unsuspend();
+ }
+ }, 6e4);
  state.unsuspend = commit;
  return function () {
- return (state.unsuspend = null);
+ state.unsuspend = null;
+ clearTimeout(stylesheetTimer);
  };
  }
  : null;
 }
-function unsuspendAfterTimeout(state) {
- setTimeout(function () {
- state.stylesheets && insertSuspendedStylesheets(state, state.stylesheets);
- if (state.unsuspend) {
- var unsuspend = state.unsuspend;
- state.unsuspend = null;
- unsuspend();
- }
- }, 500);
-}
 function onUnsuspend() {
  this.count--;
  if (0 === this.count)
@@ -16732,7 +16731,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1889 = {
  findFiberByHostInstance: getClosestInstanceFromNode,
  bundleType: 0,
- version: "18.3.0-www-classic-68d19c91",
+ version: "18.3.0-www-classic-cf74bdbb",
  rendererPackageName: "react-dom"
 };
 (function (internals) {
@@ -16776,7 +16775,7 @@ var devToolsConfig$jscomp$inline_1889 = {
  scheduleRoot: null,
  setRefreshHandler: null,
  getCurrentFiber: null,
- reconcilerVersion: "18.3.0-www-classic-68d19c91"
+ reconcilerVersion: "18.3.0-www-classic-cf74bdbb"
 });
 assign(Internals, {
  ReactBrowserEventEmitter: {
@@ -17003,7 +17002,7 @@ exports.unstable_renderSubtreeIntoContainer = function (
  );
 };
 exports.unstable_runWithPriority = runWithPriority;
-exports.version = "18.3.0-www-classic-68d19c91";
+exports.version = "18.3.0-www-classic-cf74bdbb";
 
  /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
 if (