From aeb71c1d17b02d1a5f705f7ae80591452952d91d Mon Sep 17 00:00:00 2001 From: Sanjaiyan Parthipan Date: Sun, 14 Aug 2022 07:57:25 +0530 Subject: [PATCH 1/2] Adding timeslicing for hydrating :) --- packages/integrations/react/client.js | 25 ++++++++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/packages/integrations/react/client.js b/packages/integrations/react/client.js index b41d7845afa4..fe8df90d79b8 100644 --- a/packages/integrations/react/client.js +++ b/packages/integrations/react/client.js @@ -1,7 +1,20 @@ -import { createElement } from 'react'; +import { createElement, startTransition } from 'react'; import { createRoot, hydrateRoot } from 'react-dom/client'; import StaticHtml from './static-html.js'; +/**requestIdleCallback pollyfill https://developer.chrome.com/blog/using-requestidlecallback/#checking-for-requestidlecallback */ +window?.requestIdleCallback = window?.requestIdleCallback || function (cb) { + var start = Date.now(); + return setTimeout(function () { + cb({ + didTimeout: false, + timeRemaining: function () { + return Math.max(0, 50 - (Date.now() - start)); + } + }); + }, 1); +} + function isAlreadyHydrated(element) { for (const key in element) { if (key.startsWith('__reactContainer')) { @@ -27,7 +40,13 @@ export default (element) => delete element[rootKey]; } if (client === 'only') { - return createRoot(element).render(componentEl); + return startTransition(() => { + createRoot(element).render(componentEl); + }) } - return hydrateRoot(element, componentEl); + return window?.requestIdleCallback(() => { + startTransition(() => { + hydrateRoot(element, componentEl); + }) + }) }; From 7d22519d9cea83a90c38ea0f6508e8941de3d5c2 Mon Sep 17 00:00:00 2001 From: Sanjaiyan Parthipan Date: Tue, 16 Aug 2022 21:11:56 +0530 Subject: [PATCH 2/2] update --- packages/integrations/react/client.js | 19 ++----------------- 1 file changed, 2 insertions(+), 17 deletions(-) diff --git a/packages/integrations/react/client.js b/packages/integrations/react/client.js index fe8df90d79b8..753b4a21c81d 100644 --- a/packages/integrations/react/client.js +++ b/packages/integrations/react/client.js @@ -2,19 +2,6 @@ import { createElement, startTransition } from 'react'; import { createRoot, hydrateRoot } from 'react-dom/client'; import StaticHtml from './static-html.js'; -/**requestIdleCallback pollyfill https://developer.chrome.com/blog/using-requestidlecallback/#checking-for-requestidlecallback */ -window?.requestIdleCallback = window?.requestIdleCallback || function (cb) { - var start = Date.now(); - return setTimeout(function () { - cb({ - didTimeout: false, - timeRemaining: function () { - return Math.max(0, 50 - (Date.now() - start)); - } - }); - }, 1); -} - function isAlreadyHydrated(element) { for (const key in element) { if (key.startsWith('__reactContainer')) { @@ -44,9 +31,7 @@ export default (element) => createRoot(element).render(componentEl); }) } - return window?.requestIdleCallback(() => { - startTransition(() => { - hydrateRoot(element, componentEl); - }) + return startTransition(() => { + hydrateRoot(element, componentEl); }) };