diff --git a/fixtures/ssr/src/components/LargeContent.js b/fixtures/ssr/src/components/LargeContent.js index f5c8adb03e233..3b1fa7ea35b25 100644 --- a/fixtures/ssr/src/components/LargeContent.js +++ b/fixtures/ssr/src/components/LargeContent.js @@ -1,8 +1,4 @@ -import React, { - Fragment, - Suspense, - unstable_SuspenseList as SuspenseList, -} from 'react'; +import React, {Suspense, unstable_SuspenseList as SuspenseList} from 'react'; export default function LargeContent() { return ( diff --git a/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetInlineCodeStrings.js b/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetInlineCodeStrings.js index 8c4a0a8e9a00a..4e7fb4b73f6fa 100644 --- a/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetInlineCodeStrings.js +++ b/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetInlineCodeStrings.js @@ -6,7 +6,7 @@ export const markShellTime = export const clientRenderBoundary = '$RX=function(b,c,d,e,f){var a=document.getElementById(b);a&&(b=a.previousSibling,b.data="$!",a=a.dataset,c&&(a.dgst=c),d&&(a.msg=d),e&&(a.stck=e),f&&(a.cstck=f),b._reactRetry&&b._reactRetry())};'; export const completeBoundary = - '$RB=[];$RV=function(b){$RT=performance.now();for(var a=0;aa&&2E3a&&2E3q&&2E3 TARGET_VANITY_METRIC - FALLBACK_THROTTLE_MS - ? TARGET_VANITY_METRIC - currentTime - : // Otherwise it's throttled starting from last commit time. - globalMostRecentFallbackTime + FALLBACK_THROTTLE_MS - currentTime; - // We always schedule the flush in a timer even if it's very low or negative to allow - // for multiple completeBoundary calls that are already queued to have a chance to - // make the batch. - setTimeout(window['$RV'].bind(null, window['$RB']), msUntilTimeout); + if (typeof window['$RT'] !== 'number') { + // If we haven't had our rAF callback yet, schedule everything for the first paint. + requestAnimationFrame(window['$RV'].bind(null, window['$RB'])); + } else { + const currentTime = performance.now(); + const msUntilTimeout = + // If the throttle would make us miss the target metric, then shorten the throttle. + // performance.now()'s zero value is assumed to be the start time of the metric. + currentTime < TARGET_VANITY_METRIC && + currentTime > TARGET_VANITY_METRIC - FALLBACK_THROTTLE_MS + ? TARGET_VANITY_METRIC - currentTime + : // Otherwise it's throttled starting from last commit time. + window['$RT'] + FALLBACK_THROTTLE_MS - currentTime; + // We always schedule the flush in a timer even if it's very low or negative to allow + // for multiple completeBoundary calls that are already queued to have a chance to + // make the batch. + setTimeout(window['$RV'].bind(null, window['$RB']), msUntilTimeout); + } } } diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js index c52612c51ca4a..cf4a65821e44f 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js @@ -40,6 +40,7 @@ describe('ReactDOMFizzStaticBrowser', () => { // We need the mocked version of setTimeout inside the document. window.setTimeout = setTimeout; + window.requestAnimationFrame = setTimeout; patchMessageChannel(); serverAct = require('internal-test-utils').serverAct;