From 3b5f34d606dddff433e8e6fd88a609d246864984 Mon Sep 17 00:00:00 2001
From: Sanjaiyan Parthipan <parthipankalayini@gmail.com>
Date: Fri, 26 Aug 2022 00:20:45 +0530
Subject: [PATCH] Adding time-slicing with `startTransition` to prevent
 hydration from blocking the main thread for too long for those users who
 immediately scroll. (#4313)

* Adding timeslicing for hydrating  :)

* update
---
 packages/integrations/react/client.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/integrations/react/client.js b/packages/integrations/react/client.js
index b41d7845a..753b4a21c 100644
--- a/packages/integrations/react/client.js
+++ b/packages/integrations/react/client.js
@@ -1,4 +1,4 @@
-import { createElement } from 'react';
+import { createElement, startTransition } from 'react';
 import { createRoot, hydrateRoot } from 'react-dom/client';
 import StaticHtml from './static-html.js';
 
@@ -27,7 +27,11 @@ 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 startTransition(() => {
+			hydrateRoot(element, componentEl);
+		})
 	};