In nextjs/app-beta, the UserButton doesn't seem to work with Suspense?
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.8k
- Forks
- 472
- Avg merge
- 2d 11h
- Merged PRs (30d)
- 189
Description
Trying to use the UserButton component in a next 13 server component. I understand there's some time needed to fetch the data from the user via Clerk's api and retrieve the image.
I was wondering why this component/pattern doesn't adhere to the <Suspense /> loading pattern. (Loading UI doesn't show before the component/image is ready)
I've attached a gif of what it's kind of doing, and it does the same even when wrapped with:
<Suspense fallback={<p>loading...</p>}>
<UserButton />
</Suspense>
Am I doing something wrong here or is the implementation of UserButton just doesn't really allow the effects of Suspense as it loads? Sorry if I'm missing something here. Still new to app-router and the clerk app-beta.
Thanks!
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with UserButton in nextjs/app-beta and reproduce the reported behavior in a Next 13 server component wrapped in Suspense. Compare the behavior with the supplied fallback while the user data and image load. Done means the expected Suspense behavior is established and the reproduction is either resolved or clearly documented.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- next.js, react, typescript
- Domain
- authentication, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100