Skip to content

Commit e1d88e6

Browse files
acdliteacdlite
committed
[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)
1 parent 32a8c3b commit e1d88e6

15 files changed

+174
-164
lines changed

‎compiled/facebook-www/REVISION‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
888874673f81c08d9c3cfd4a56e2e93fd728894c
1+
0ae348018d5b3a3f1ccdd92de85d9cc581b2b98d

‎compiled/facebook-www/React-dev.modern.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ if (
2727
}
2828
"use strict";
2929

30-
var ReactVersion = "18.3.0-www-modern-c4354f6b";
30+
var ReactVersion = "18.3.0-www-modern-01f5e12b";
3131

3232
// ATTENTION
3333
// When adding new symbols to this file,

‎compiled/facebook-www/ReactART-dev.classic.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ function _assertThisInitialized(self) {
6969
return self;
7070
}
7171

72-
var ReactVersion = "18.3.0-www-classic-eed36d56";
72+
var ReactVersion = "18.3.0-www-classic-69b188ab";
7373

7474
var LegacyRoot = 0;
7575
var ConcurrentRoot = 1;

‎compiled/facebook-www/ReactART-prod.modern.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9723,7 +9723,7 @@ var slice = Array.prototype.slice,
97239723
return null;
97249724
},
97259725
bundleType: 0,
9726-
version: "18.3.0-www-modern-15f5d624",
9726+
version: "18.3.0-www-modern-944376ad",
97279727
rendererPackageName: "react-art"
97289728
};
97299729
var internals$jscomp$inline_1322 = {
@@ -9754,7 +9754,7 @@ var internals$jscomp$inline_1322 = {
97549754
scheduleRoot: null,
97559755
setRefreshHandler: null,
97569756
getCurrentFiber: null,
9757-
reconcilerVersion: "18.3.0-www-modern-15f5d624"
9757+
reconcilerVersion: "18.3.0-www-modern-944376ad"
97589758
};
97599759
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
97609760
var hook$jscomp$inline_1323 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

‎compiled/facebook-www/ReactDOM-dev.classic.js‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -33880,7 +33880,7 @@ function createFiberRoot(
3388033880
return root;
3388133881
}
3388233882

33883-
var ReactVersion = "18.3.0-www-classic-d91df09f";
33883+
var ReactVersion = "18.3.0-www-classic-69c1612b";
3388433884

3388533885
function createPortal$1(
3388633886
children,
@@ -43139,31 +43139,35 @@ function waitForCommitToBeReady() {
4313943139

4314043140
if (state.count > 0) {
4314143141
return function (commit) {
43142-
unsuspendAfterTimeout(state);
43142+
// We almost never want to show content before its styles have loaded. But
43143+
// eventually we will give up and allow unstyled content. So this number is
43144+
// somewhat arbitrary — big enough that you'd only reach it under
43145+
// extreme circumstances.
43146+
// TODO: Figure out what the browser engines do during initial page load and
43147+
// consider aligning our behavior with that.
43148+
var stylesheetTimer = setTimeout(function () {
43149+
if (state.stylesheets) {
43150+
insertSuspendedStylesheets(state, state.stylesheets);
43151+
}
43152+
43153+
if (state.unsuspend) {
43154+
var unsuspend = state.unsuspend;
43155+
state.unsuspend = null;
43156+
unsuspend();
43157+
}
43158+
}, 60000); // one minute
43159+
4314343160
state.unsuspend = commit;
4314443161
return function () {
43145-
return (state.unsuspend = null);
43162+
state.unsuspend = null;
43163+
clearTimeout(stylesheetTimer);
4314643164
};
4314743165
};
4314843166
}
4314943167

4315043168
return null;
4315143169
}
4315243170

43153-
function unsuspendAfterTimeout(state) {
43154-
setTimeout(function () {
43155-
if (state.stylesheets) {
43156-
insertSuspendedStylesheets(state, state.stylesheets);
43157-
}
43158-
43159-
if (state.unsuspend) {
43160-
var unsuspend = state.unsuspend;
43161-
state.unsuspend = null;
43162-
unsuspend();
43163-
}
43164-
}, 500);
43165-
}
43166-
4316743171
function onUnsuspend() {
4316843172
this.count--;
4316943173

‎compiled/facebook-www/ReactDOM-dev.modern.js‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -33719,7 +33719,7 @@ function createFiberRoot(
3371933719
return root;
3372033720
}
3372133721

33722-
var ReactVersion = "18.3.0-www-modern-15f5d624";
33722+
var ReactVersion = "18.3.0-www-modern-944376ad";
3372333723

3372433724
function createPortal$1(
3372533725
children,
@@ -43687,31 +43687,35 @@ function waitForCommitToBeReady() {
4368743687

4368843688
if (state.count > 0) {
4368943689
return function (commit) {
43690-
unsuspendAfterTimeout(state);
43690+
// We almost never want to show content before its styles have loaded. But
43691+
// eventually we will give up and allow unstyled content. So this number is
43692+
// somewhat arbitrary — big enough that you'd only reach it under
43693+
// extreme circumstances.
43694+
// TODO: Figure out what the browser engines do during initial page load and
43695+
// consider aligning our behavior with that.
43696+
var stylesheetTimer = setTimeout(function () {
43697+
if (state.stylesheets) {
43698+
insertSuspendedStylesheets(state, state.stylesheets);
43699+
}
43700+
43701+
if (state.unsuspend) {
43702+
var unsuspend = state.unsuspend;
43703+
state.unsuspend = null;
43704+
unsuspend();
43705+
}
43706+
}, 60000); // one minute
43707+
4369143708
state.unsuspend = commit;
4369243709
return function () {
43693-
return (state.unsuspend = null);
43710+
state.unsuspend = null;
43711+
clearTimeout(stylesheetTimer);
4369443712
};
4369543713
};
4369643714
}
4369743715

4369843716
return null;
4369943717
}
4370043718

43701-
function unsuspendAfterTimeout(state) {
43702-
setTimeout(function () {
43703-
if (state.stylesheets) {
43704-
insertSuspendedStylesheets(state, state.stylesheets);
43705-
}
43706-
43707-
if (state.unsuspend) {
43708-
var unsuspend = state.unsuspend;
43709-
state.unsuspend = null;
43710-
unsuspend();
43711-
}
43712-
}, 500);
43713-
}
43714-
4371543719
function onUnsuspend() {
4371643720
this.count--;
4371743721

‎compiled/facebook-www/ReactDOM-prod.classic.js‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15070,24 +15070,23 @@ function waitForCommitToBeReady() {
1507015070
insertSuspendedStylesheets(state, state.stylesheets);
1507115071
return 0 < state.count
1507215072
? function (commit) {
15073-
unsuspendAfterTimeout(state);
15073+
var stylesheetTimer = setTimeout(function () {
15074+
state.stylesheets &&
15075+
insertSuspendedStylesheets(state, state.stylesheets);
15076+
if (state.unsuspend) {
15077+
var unsuspend = state.unsuspend;
15078+
state.unsuspend = null;
15079+
unsuspend();
15080+
}
15081+
}, 6e4);
1507415082
state.unsuspend = commit;
1507515083
return function () {
15076-
return (state.unsuspend = null);
15084+
state.unsuspend = null;
15085+
clearTimeout(stylesheetTimer);
1507715086
};
1507815087
}
1507915088
: null;
1508015089
}
15081-
function unsuspendAfterTimeout(state) {
15082-
setTimeout(function () {
15083-
state.stylesheets && insertSuspendedStylesheets(state, state.stylesheets);
15084-
if (state.unsuspend) {
15085-
var unsuspend = state.unsuspend;
15086-
state.unsuspend = null;
15087-
unsuspend();
15088-
}
15089-
}, 500);
15090-
}
1509115090
function onUnsuspend() {
1509215091
this.count--;
1509315092
if (0 === this.count)
@@ -15958,7 +15957,7 @@ Internals.Events = [
1595815957
var devToolsConfig$jscomp$inline_1810 = {
1595915958
findFiberByHostInstance: getClosestInstanceFromNode,
1596015959
bundleType: 0,
15961-
version: "18.3.0-www-classic-ecc92a93",
15960+
version: "18.3.0-www-classic-edf1acce",
1596215961
rendererPackageName: "react-dom"
1596315962
};
1596415963
var internals$jscomp$inline_2206 = {
@@ -15988,7 +15987,7 @@ var internals$jscomp$inline_2206 = {
1598815987
scheduleRoot: null,
1598915988
setRefreshHandler: null,
1599015989
getCurrentFiber: null,
15991-
reconcilerVersion: "18.3.0-www-classic-ecc92a93"
15990+
reconcilerVersion: "18.3.0-www-classic-edf1acce"
1599215991
};
1599315992
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
1599415993
var hook$jscomp$inline_2207 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -16228,4 +16227,4 @@ exports.unstable_renderSubtreeIntoContainer = function (
1622816227
);
1622916228
};
1623016229
exports.unstable_runWithPriority = runWithPriority;
16231-
exports.version = "18.3.0-www-classic-ecc92a93";
16230+
exports.version = "18.3.0-www-classic-edf1acce";

‎compiled/facebook-www/ReactDOM-prod.modern.js‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15319,24 +15319,23 @@ function waitForCommitToBeReady() {
1531915319
insertSuspendedStylesheets(state, state.stylesheets);
1532015320
return 0 < state.count
1532115321
? function (commit) {
15322-
unsuspendAfterTimeout(state);
15322+
var stylesheetTimer = setTimeout(function () {
15323+
state.stylesheets &&
15324+
insertSuspendedStylesheets(state, state.stylesheets);
15325+
if (state.unsuspend) {
15326+
var unsuspend = state.unsuspend;
15327+
state.unsuspend = null;
15328+
unsuspend();
15329+
}
15330+
}, 6e4);
1532315331
state.unsuspend = commit;
1532415332
return function () {
15325-
return (state.unsuspend = null);
15333+
state.unsuspend = null;
15334+
clearTimeout(stylesheetTimer);
1532615335
};
1532715336
}
1532815337
: null;
1532915338
}
15330-
function unsuspendAfterTimeout(state) {
15331-
setTimeout(function () {
15332-
state.stylesheets && insertSuspendedStylesheets(state, state.stylesheets);
15333-
if (state.unsuspend) {
15334-
var unsuspend = state.unsuspend;
15335-
state.unsuspend = null;
15336-
unsuspend();
15337-
}
15338-
}, 500);
15339-
}
1534015339
function onUnsuspend() {
1534115340
this.count--;
1534215341
if (0 === this.count)
@@ -15485,7 +15484,7 @@ Internals.Events = [
1548515484
var devToolsConfig$jscomp$inline_1768 = {
1548615485
findFiberByHostInstance: getClosestInstanceFromNode,
1548715486
bundleType: 0,
15488-
version: "18.3.0-www-modern-1b7cf3c0",
15487+
version: "18.3.0-www-modern-0c23841c",
1548915488
rendererPackageName: "react-dom"
1549015489
};
1549115490
var internals$jscomp$inline_2169 = {
@@ -15516,7 +15515,7 @@ var internals$jscomp$inline_2169 = {
1551615515
scheduleRoot: null,
1551715516
setRefreshHandler: null,
1551815517
getCurrentFiber: null,
15519-
reconcilerVersion: "18.3.0-www-modern-1b7cf3c0"
15518+
reconcilerVersion: "18.3.0-www-modern-0c23841c"
1552015519
};
1552115520
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
1552215521
var hook$jscomp$inline_2170 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -15685,4 +15684,4 @@ exports.unstable_createEventHandle = function (type, options) {
1568515684
return eventHandle;
1568615685
};
1568715686
exports.unstable_runWithPriority = runWithPriority;
15688-
exports.version = "18.3.0-www-modern-1b7cf3c0";
15687+
exports.version = "18.3.0-www-modern-0c23841c";

‎compiled/facebook-www/ReactDOM-profiling.classic.js‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15844,24 +15844,23 @@ function waitForCommitToBeReady() {
1584415844
insertSuspendedStylesheets(state, state.stylesheets);
1584515845
return 0 < state.count
1584615846
? function (commit) {
15847-
unsuspendAfterTimeout(state);
15847+
var stylesheetTimer = setTimeout(function () {
15848+
state.stylesheets &&
15849+
insertSuspendedStylesheets(state, state.stylesheets);
15850+
if (state.unsuspend) {
15851+
var unsuspend = state.unsuspend;
15852+
state.unsuspend = null;
15853+
unsuspend();
15854+
}
15855+
}, 6e4);
1584815856
state.unsuspend = commit;
1584915857
return function () {
15850-
return (state.unsuspend = null);
15858+
state.unsuspend = null;
15859+
clearTimeout(stylesheetTimer);
1585115860
};
1585215861
}
1585315862
: null;
1585415863
}
15855-
function unsuspendAfterTimeout(state) {
15856-
setTimeout(function () {
15857-
state.stylesheets && insertSuspendedStylesheets(state, state.stylesheets);
15858-
if (state.unsuspend) {
15859-
var unsuspend = state.unsuspend;
15860-
state.unsuspend = null;
15861-
unsuspend();
15862-
}
15863-
}, 500);
15864-
}
1586515864
function onUnsuspend() {
1586615865
this.count--;
1586715866
if (0 === this.count)
@@ -16732,7 +16731,7 @@ Internals.Events = [
1673216731
var devToolsConfig$jscomp$inline_1889 = {
1673316732
findFiberByHostInstance: getClosestInstanceFromNode,
1673416733
bundleType: 0,
16735-
version: "18.3.0-www-classic-68d19c91",
16734+
version: "18.3.0-www-classic-cf74bdbb",
1673616735
rendererPackageName: "react-dom"
1673716736
};
1673816737
(function (internals) {
@@ -16776,7 +16775,7 @@ var devToolsConfig$jscomp$inline_1889 = {
1677616775
scheduleRoot: null,
1677716776
setRefreshHandler: null,
1677816777
getCurrentFiber: null,
16779-
reconcilerVersion: "18.3.0-www-classic-68d19c91"
16778+
reconcilerVersion: "18.3.0-www-classic-cf74bdbb"
1678016779
});
1678116780
assign(Internals, {
1678216781
ReactBrowserEventEmitter: {
@@ -17003,7 +17002,7 @@ exports.unstable_renderSubtreeIntoContainer = function (
1700317002
);
1700417003
};
1700517004
exports.unstable_runWithPriority = runWithPriority;
17006-
exports.version = "18.3.0-www-classic-68d19c91";
17005+
exports.version = "18.3.0-www-classic-cf74bdbb";
1700717006

1700817007
/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
1700917008
if (

0 commit comments

Comments
 (0)