Next.js Discord

Discord Forum

Clerk's <UserButton /> is reloading during navigation/refresh

Unanswered
Asiatic Lion posted this in #help-forum
Open in Discord
Asiatic LionOP
I'm running into an issue using the Mantine AppShell where my Clerk <UserButton /> component is refreshing/reloading each navigation click and refresh. I'm not really sure what to take a look at to resolve this one.

Video example of a basic layout.jsx
https://www.loom.com/share/b2d059ca3079412db71d6ae08bd6ef48

Video example using Mantine
https://www.loom.com/share/2ac3abc4ed024042a871e4caed32f3aa

2 Replies

Asiatic LionOP
Here is the basic example's code:
layout.jsx

import {
  ClerkProvider,
  SignInButton,
  SignedIn,
  SignedOut,
  UserButton,
} 
from
 '@clerk/nextjs';

export
 
default
 function RootLayout({ 
children
 }) {
  
return
 (
    <ClerkProvider>
      <html lang='en'>
        <body>
          <header>
            <SignedOut>
              <SignInButton />
            </SignedOut>
            <SignedIn>
              <UserButton />
            </SignedIn>
            <div>Hello from a header/div</div>
          </header>
          <main>
            <div>This is text from a main/div</div>
            {
children
}
          </main>
        </body>
      </html>
    </ClerkProvider>
  );
}
I can also provide the Mantine version but it's a bit longer