fix adminwrap issue

src/app/_components/TopNav.tsx

@@ -1,6 +1,7 @@
+"use client"
 import Link from "next/link"
 import AdminWrap from "./AdminWrap"
-import { Show, SignInButton, SignOutButton, SignUpButton, UserButton } from "@clerk/nextjs"
+import { ClerkLoaded, Show, SignInButton, SignOutButton, SignUpButton, UserButton } from "@clerk/nextjs"
 import { Button } from "~/components/ui/button"
 import { ThemeSwitch } from "./ThemeSwitch"
 
@@ -39,13 +40,15 @@ export default function TopNav() {
 						</Button>
 					</Show>
 					<ThemeSwitch />
-					<Show when="signed-in">
-						<Button asChild className="flex h-10 lg:h-full cursor-pointer lg:w-20 content-center" variant={"outline"}>
-							<div>
-							<UserButton />
-							</div>
-						</Button>
-					</Show>
+					<ClerkLoaded>
+						<Show when="signed-in">
+							<Button asChild className="flex h-10 lg:h-full cursor-pointer lg:w-20 content-center" variant={"outline"}>
+								<div>
+									<UserButton />
+								</div>
+							</Button>
+						</Show>
+					</ClerkLoaded>
 				</div>
 			</nav>
 		</div>