From aeb71c1d17b02d1a5f705f7ae80591452952d91d Mon Sep 17 00:00:00 2001
From: Sanjaiyan Parthipan <parthipankalayini@gmail.com>
Date: Sun, 14 Aug 2022 07:57:25 +0530
Subject: [PATCH] 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);
+			})
+		})
 	};