feat: add loading to the signin button (#123)

* feat: add loading to signin button

* fix: padding in the back button detail page

* fix: button size

Author: peppescg

src/app/catalog/[repoName]/[serverName]/[version]/page.tsx

@@ -30,7 +30,7 @@ export default async function CatalogDetailPage({
   const server = serverResponse?.server ?? {};
 
   return (
-    <div className="flex flex-col gap-2 pt-5 pb-8 px-4">
+    <div className="flex flex-col gap-2 pb-8 px-4">
       <ServerDetailTitle
         publisher={server.repository?.source}
         serverName={server.name || "Unknown server"}

src/app/signin/signin-button.tsx

@@ -1,21 +1,26 @@
 "use client";
+import { Loader2 } from "lucide-react";
+import { useState } from "react";
 import { toast } from "sonner";
 import { OktaIcon } from "@/components/brand-icons";
 import { Button } from "@/components/ui/button";
 import { authClient } from "@/lib/auth/auth-client";
 
 export function SignInButton({ providerId }: { providerId: string }) {
+  const [isLoading, setIsLoading] = useState(false);
   const isOktaProvider = providerId === "okta" || providerId === "oidc";
   const providerName = providerId.charAt(0).toUpperCase() + providerId.slice(1);
 
   const handleOIDCSignIn = async () => {
+    setIsLoading(true);
     try {
       const { error } = await authClient.signIn.oauth2({
         providerId,
         callbackURL: "/catalog",
       });
 
       if (error) {
+        setIsLoading(false);
         toast.error("Signin failed", {
           description:
             error.message ||
@@ -24,6 +29,7 @@ export function SignInButton({ providerId }: { providerId: string }) {
         return;
       }
     } catch (error) {
+      setIsLoading(false);
       const errorMessage =
         error instanceof Error ? error.message : "An unexpected error occurred";
 
@@ -38,9 +44,16 @@ export function SignInButton({ providerId }: { providerId: string }) {
       onClick={handleOIDCSignIn}
       className="w-full h-9 gap-2"
       size="default"
+      disabled={isLoading}
     >
-      {isOktaProvider && <OktaIcon className="size-4 shrink-0" />}
-      <span>{providerName}</span>
+      {isLoading ? (
+        <Loader2 className="text-muted-foreground size-4 animate-spin" />
+      ) : (
+        <>
+          {isOktaProvider && <OktaIcon className="size-4 shrink-0" />}
+          <span>{providerName}</span>
+        </>
+      )}
     </Button>
   );
 }