feat: add loading state to sign in button (#110)

src/components/navbar/sign-in-button.tsx

@@ -1,10 +1,25 @@
 'use client';
 
+import { useTransition } from 'react';
 import { signIn } from 'next-auth/react';
 
+import { Icons } from '@/components/icons';
 import { Button } from '@/components/ui/button';
 import * as m from '@/paraglide/messages';
 
 export const SignInButton = () => {
-  return <Button onClick={() => signIn('github')}>{m.sign_in()}</Button>;
+  const [isPending, startTransition] = useTransition();
+
+  const handleSignIn = () => {
+    startTransition(async () => {
+      await signIn('github');
+    });
+  };
+
+  return (
+    <Button onClick={handleSignIn} disabled={isPending}>
+      {isPending && <Icons.loader className="mr-2 size-4 animate-spin" />}
+      {m.sign_in()}
+    </Button>
+  );
 };