fix: login does not poll for status callback

farcasterxyz · Jul 26, 2024 · 84ca1f9 · 84ca1f9
1 parent cc83b7b
commit 84ca1f9
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/packages/auth-kit/src/components/ActionButton/ActionButton.tsx b/packages/auth-kit/src/components/ActionButton/ActionButton.tsx
@@ -4,12 +4,14 @@ import { Button } from "../Button.tsx";
 export function ActionButton({
   label,
   onClick,
+  initializing
 }: {
   label: string;
   onClick: () => void;
+  initializing: boolean;
 }) {
   return (
-    <Button kind="primary" onClick={onClick}>
+    <Button kind="primary" onClick={onClick} disabled={initializing}>
       <FarcasterLogo height={20} fill="white" />
       <span style={{ marginLeft: 9 }}>{label}</span>
     </Button>

diff --git a/packages/auth-kit/src/components/SignInButton/SignInButton.tsx b/packages/auth-kit/src/components/SignInButton/SignInButton.tsx
@@ -103,7 +103,7 @@ export function SignInButton({
         />
       ) : (
         <>
-          <ActionButton onClick={onClick} label="Sign in" />
+          <ActionButton initializing={!url} onClick={onClick} label={'Sign in' }/>
           {url && (
             <QRCodeDialog
               open={showDialog && !isMobile()}

diff --git a/packages/auth-kit/src/components/styles.css.ts b/packages/auth-kit/src/components/styles.css.ts
@@ -36,6 +36,12 @@ export const button = {
   fontWeight: 600,
   display: "flex",
   alignItems: "center",
+
+  ":disabled": {
+    cursor: "not-allowed",
+    opacity: 0.75,
+  },
+  transition: "opacity 0.2s",
 };
 
 export const resetButton = style({