-
Notifications
You must be signed in to change notification settings - Fork 1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix hydration of components inside
<Suspense>
(#2663)
* Add repro for suspense wip * Refactor to wildcard import * Targeted fix for react 18 + suspense * Update changelog * Update types * Add styling * update styling
- Loading branch information
1 parent
88b068c
commit a317866
Showing
3 changed files
with
114 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,72 @@ | ||
'use client' | ||
|
||
import { Portal } from '@headlessui/react' | ||
import { Suspense, lazy } from 'react' | ||
|
||
function MyComponent({ children }: { children(message: string): JSX.Element }) { | ||
return <>{children('test')}</> | ||
} | ||
|
||
let MyComponentLazy = lazy(async () => { | ||
await new Promise((resolve) => setTimeout(resolve, 4000)) | ||
|
||
return { default: MyComponent } | ||
}) | ||
|
||
export default function Index() { | ||
return ( | ||
<div> | ||
<h1 className="p-8 text-3xl font-bold">Suspense + Portals</h1> | ||
|
||
<Portal> | ||
<div className="absolute top-24 right-48 z-10 flex h-32 w-32 flex-col items-center justify-center rounded border border-black/5 bg-white bg-clip-padding p-px shadow"> | ||
<div className="w-full rounded-t-sm bg-gray-100 p-1 text-center text-gray-700"> | ||
Instant | ||
</div> | ||
<div className="flex w-full flex-1 items-center justify-center text-3xl font-bold text-gray-400"> | ||
1 | ||
</div> | ||
</div> | ||
</Portal> | ||
<Portal> | ||
<div className="absolute top-24 right-8 z-10 flex h-32 w-32 flex-col items-center justify-center rounded border border-black/5 bg-white bg-clip-padding p-px shadow"> | ||
<div className="w-full rounded-t-sm bg-gray-100 p-1 text-center text-gray-700"> | ||
Instant | ||
</div> | ||
<div className="flex w-full flex-1 items-center justify-center text-3xl font-bold text-gray-400"> | ||
2 | ||
</div> | ||
</div> | ||
</Portal> | ||
|
||
<Suspense fallback={<span>Loading ...</span>}> | ||
<MyComponentLazy> | ||
{(env) => ( | ||
<div> | ||
<Portal> | ||
<div className="absolute top-64 right-48 z-10 flex h-32 w-32 flex-col items-center justify-center rounded border border-black/5 bg-white bg-clip-padding p-px shadow"> | ||
<div className="w-full rounded-t-sm bg-gray-100 p-1 text-center text-gray-700"> | ||
Suspense | ||
</div> | ||
<div className="flex w-full flex-1 items-center justify-center text-3xl font-bold text-gray-400"> | ||
{env} 1 | ||
</div> | ||
</div> | ||
</Portal> | ||
<Portal> | ||
<div className="absolute top-64 right-8 z-10 flex h-32 w-32 flex-col items-center justify-center rounded border border-black/5 bg-white bg-clip-padding p-px shadow"> | ||
<div className="w-full rounded-t-sm bg-gray-100 p-1 text-center text-gray-700"> | ||
Suspense | ||
</div> | ||
<div className="flex w-full flex-1 items-center justify-center text-3xl font-bold text-gray-400"> | ||
{env} 2 | ||
</div> | ||
</div> | ||
</Portal> | ||
</div> | ||
)} | ||
</MyComponentLazy> | ||
</Suspense> | ||
</div> | ||
) | ||
} |
a317866
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
headlessui-vue – ./packages/playground-vue
headlessui-vue.vercel.app
headlessui-vue-git-main-tailwindlabs.vercel.app
headlessui-vue-tailwindlabs.vercel.app
a317866
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
headlessui-react – ./packages/playground-react
headlessui-react-git-main-tailwindlabs.vercel.app
headlessui-react-tailwindlabs.vercel.app
headlessui-react.vercel.app