I am also seeing this behaviour, did you find a solution or does anyone else know if there is one?

@lhennerley unfortunately not really, please let me know if you or anyone else have figured out the reason for this or a workaround?

I am sure it's something to do with an imported client component not being able to be captured by the Suspense boundaries. Or the fetching of the client component is not registered as a fetch

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

This issue was closed because it has been stalled for 10 days with no activity.

I am seeing this issue of reloading/ flickering, during navigation also (NextJs 13 AppRouter)

I am seeing this issue of reloading/ flickering, during navigation also (NextJs 13 AppRouter)

yeah no way to make it work with suspense, but I just stop the layout shift by putting it in a div and setting the width and height

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

Small update - we are working on a resolution for this one. So sorry for the delays!

im having an issue with the userButton gives hydration error in next 13 and this userButton causing it

@xNOVA2 The best way to get this addressed would be to open a new issue and provide a minimal reproduction 🙏

For me, it works well :

import Loading from "@/app/loading";
import { ClerkLoading, SignedIn, SignedOut, UserButton } from "@clerk/nextjs";

export default async function User() {
  return (
    <>
      <ClerkLoading>
        <Loading />
      </ClerkLoading>
      <SignedOut>
        <Link href="/education/sign-in" className={styles.linkSignin}>Entrar</Link>
      </SignedOut>
      <SignedIn>
        <UserButton afterSignOutUrl="/education" />
      </SignedIn>
    </>
  )
}

use ClerkLoading

Using <ClerkLoading> there's still a tiny flash of layout shift right when the <ClerkLoading> disappears and the <UserButton> appears.

We introduced a temporary solution with the fallback prop.