Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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 [0ae348018d](https://github.com/facebook/react/commit/0ae348018d5b3a3f1ccdd92de85d9cc581b2b98d)
This commit is contained in:
acdlite
2023-03-31 19:50:42 +00:00
parent 32a8c3b6d1
commit e1d88e645e
15 changed files with 174 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files
compiled/facebook-www/REVISION
+1 -1
View File
@@ -1 +1 @@
888874673f81c08d9c3cfd4a56e2e93fd728894c
0ae348018d5b3a3f1ccdd92de85d9cc581b2b98d
compiled/facebook-www/React-dev.modern.js
+1 -1
View File
@@ -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,
compiled/facebook-www/ReactART-dev.classic.js
+1 -1
View File
@@ -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;
compiled/facebook-www/ReactART-prod.modern.js
+2 -2
View File
@@ -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__;
compiled/facebook-www/ReactDOM-dev.classic.js
+21 -17
View File
@@ -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,10 +43139,28 @@ 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);
};
};
}
@@ -43150,20 +43168,6 @@ function waitForCommitToBeReady() {
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--;
compiled/facebook-www/ReactDOM-dev.modern.js
+21 -17
View File
@@ -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,10 +43687,28 @@ 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);
};
};
}
@@ -43698,20 +43716,6 @@ function waitForCommitToBeReady() {
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--;
compiled/facebook-www/ReactDOM-prod.classic.js
+14 -15
View File
@@ -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";
compiled/facebook-www/ReactDOM-prod.modern.js
+14 -15
View File
@@ -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";
compiled/facebook-www/ReactDOM-profiling.classic.js
+14 -15
View File
@@ -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 (
compiled/facebook-www/ReactDOM-profiling.modern.js
+14 -15
View File
@@ -16087,24 +16087,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)
@@ -16253,7 +16252,7 @@ Internals.Events = [
var devToolsConfig$jscomp$inline_1847 = {
findFiberByHostInstance: getClosestInstanceFromNode,
bundleType: 0,
version: "18.3.0-www-modern-ee95a7ff",
version: "18.3.0-www-modern-b6e8e2d5",
rendererPackageName: "react-dom"
};
(function (internals) {
@@ -16298,7 +16297,7 @@ var devToolsConfig$jscomp$inline_1847 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-www-modern-ee95a7ff"
reconcilerVersion: "18.3.0-www-modern-b6e8e2d5"
});
exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals;
exports.createPortal = function (children, container) {
@@ -16454,7 +16453,7 @@ exports.unstable_createEventHandle = function (type, options) {
return eventHandle;
};
exports.unstable_runWithPriority = runWithPriority;
exports.version = "18.3.0-www-modern-ee95a7ff";
exports.version = "18.3.0-www-modern-b6e8e2d5";
/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
if (
compiled/facebook-www/ReactDOMTesting-dev.classic.js
+21 -17
View File
@@ -35934,7 +35934,7 @@ function createFiberRoot(
return root;
}
var ReactVersion = "18.3.0-www-classic-86757ea3";
var ReactVersion = "18.3.0-www-classic-75e14579";
function createPortal$1(
children,
@@ -44850,10 +44850,28 @@ 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);
};
};
}
@@ -44861,20 +44879,6 @@ function waitForCommitToBeReady() {
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--;
compiled/facebook-www/ReactDOMTesting-dev.modern.js
+21 -17
View File
@@ -34338,7 +34338,7 @@ function createFiberRoot(
return root;
}
var ReactVersion = "18.3.0-www-modern-e259e61c";
var ReactVersion = "18.3.0-www-modern-659002d6";
function createPortal$1(
children,
@@ -44438,10 +44438,28 @@ 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);
};
};
}
@@ -44449,20 +44467,6 @@ function waitForCommitToBeReady() {
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--;
compiled/facebook-www/ReactDOMTesting-prod.classic.js
+14 -15
View File
@@ -14645,7 +14645,7 @@ Internals.Events = [
var devToolsConfig$jscomp$inline_1767 = {
findFiberByHostInstance: getClosestInstanceFromNode,
bundleType: 0,
version: "18.3.0-www-classic-eed36d56",
version: "18.3.0-www-classic-69b188ab",
rendererPackageName: "react-dom"
};
var internals$jscomp$inline_2236 = {
@@ -14675,7 +14675,7 @@ var internals$jscomp$inline_2236 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-www-classic-eed36d56"
reconcilerVersion: "18.3.0-www-classic-69b188ab"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_2237 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -15636,24 +15636,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)
@@ -16708,4 +16707,4 @@ exports.unstable_renderSubtreeIntoContainer = function (
);
};
exports.unstable_runWithPriority = runWithPriority;
exports.version = "18.3.0-www-classic-eed36d56";
exports.version = "18.3.0-www-classic-69b188ab";
compiled/facebook-www/ReactDOMTesting-prod.modern.js
+14 -15
View File
@@ -15703,24 +15703,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)
@@ -15869,7 +15868,7 @@ Internals.Events = [
var devToolsConfig$jscomp$inline_1797 = {
findFiberByHostInstance: getClosestInstanceFromNode,
bundleType: 0,
version: "18.3.0-www-modern-c4354f6b",
version: "18.3.0-www-modern-01f5e12b",
rendererPackageName: "react-dom"
};
var internals$jscomp$inline_2203 = {
@@ -15900,7 +15899,7 @@ var internals$jscomp$inline_2203 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-www-modern-c4354f6b"
reconcilerVersion: "18.3.0-www-modern-01f5e12b"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_2204 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -16220,4 +16219,4 @@ exports.unstable_createEventHandle = function (type, options) {
return eventHandle;
};
exports.unstable_runWithPriority = runWithPriority;
exports.version = "18.3.0-www-modern-c4354f6b";
exports.version = "18.3.0-www-modern-01f5e12b";
compiled/facebook-www/ReactTestRenderer-dev.modern.js
+1 -1
View File
@@ -24479,7 +24479,7 @@ function createFiberRoot(
return root;
}
var ReactVersion = "18.3.0-www-modern-c4354f6b";
var ReactVersion = "18.3.0-www-modern-01f5e12b";
// Might add PROFILE later.