michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Adding time-slicing with startTransition to prevent hydration from blocking the main thread for too long for those users who immediately scroll. (#4313)

Browse source 
* Adding timeslicing for hydrating  :)

* update
This commit is contained in:
Sanjaiyan Parthipan 2022-08-26 00:20:45 +05:30 committed by GitHub
parent 1aa5208cbe
commit 3b5f34d606
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
packages/integrations/react/client.js
View file

@ -1,4 +1,4 @@
import { createElement } from 'react'; import { createElement, startTransition } from 'react';
import { createRoot, hydrateRoot } from 'react-dom/client'; import { createRoot, hydrateRoot } from 'react-dom/client';
import StaticHtml from './static-html.js'; import StaticHtml from './static-html.js';
@ -27,7 +27,11 @@ export default (element) =>
delete element[rootKey]; delete element[rootKey];
} }
if (client === 'only') { if (client === 'only') {
return createRoot(element).render(componentEl); return startTransition(() => {
createRoot(element).render(componentEl);
})
} }
return hydrateRoot(element, componentEl); return startTransition(() => {
hydrateRoot(element, componentEl);
})
}; };