When page loads, clerk components such as or takes longer to be rendered as compared to other components (NextJs 14). Is there an issue in the way I am coding thats causing this problem?

Here is a simplified version of my current code, is there a way to optimise it such that those components are rendered at the same time? Any insights is appreciated!

import { Button } from "@/components/ui/button";
import { SignInButton, SignedIn, SignedOut, UserButton } from "@clerk/nextjs";
import Link from "next/link";

export default async function Home() {
  return (
    <div>
      <SignedOut>
        <h1>Test</h1>
        <SignInButton>
          <Link href='/signin'>
            <Button className="mt-4">
              Sign in here
            </Button>
          </Link>
        </SignInButton>
      </SignedOut>
      <SignedIn>
          <UserButton />
          <h1>Hello, you are signed in</h1>
      </SignedIn>
    </div>
  );
}