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

1 files 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);
+		})
 	};