From 38317ba64504f11e10ad26702726a857a1a186ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Skolak?= <skolakmichal1@gmail.com>
Date: Fri, 7 Jun 2024 19:06:39 +0200
Subject: [PATCH] feat: add loading state to sign in button (#110)

---
 src/components/navbar/sign-in-button.tsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/navbar/sign-in-button.tsx b/src/components/navbar/sign-in-button.tsx
index e9ff3f1..1ae7810 100644
--- a/src/components/navbar/sign-in-button.tsx
+++ b/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>
+  );
 };