From af928c34c787b5890d6144791ea85c413b35fc8d Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Mon, 13 Apr 2026 18:17:25 -0400
Subject: [PATCH] adding loading states to log in so users know things are
 happening

---
 components/LoginButton.tsx              | 188 +++++++++++++-----------
 components/Subscribe/EmailSubscribe.tsx |  23 ++-
 components/Subscribe/HandleInput.tsx    |  21 ++-
 3 files changed, 139 insertions(+), 93 deletions(-)

diff --git a/components/LoginButton.tsx b/components/LoginButton.tsx
index 0f61a3dd..0891f1fa 100644
--- a/components/LoginButton.tsx
+++ b/components/LoginButton.tsx
@@ -47,18 +47,23 @@ export function LoginActionButton() {
   >("log in");
   let [loginEmail, setLoginEmail] = useState("");
   let [tokenId, setTokenId] = useState<string | null>(null);
+  let [loading, setLoading] = useState(false);
   let toaster = useToaster();
 
   const handleEmailSubmit = async () => {
+    setLoading(true);
     const id = await requestAuthEmailToken(loginEmail);
+    setLoading(false);
     setTokenId(id);
     setState("email confirm");
   };
 
   const handleCodeSubmit = async (code: string) => {
     if (!tokenId) return;
+    setLoading(true);
     const confirmedToken = await confirmEmailAuthToken(tokenId, code);
     if (!confirmedToken) {
+      setLoading(false);
       toaster({
         content: <div className="font-bold">Incorrect code!</div>,
         type: "error",
@@ -67,10 +72,6 @@ export function LoginActionButton() {
       const localLeaflets = getHomeDocs();
       await loginWithEmailToken(localLeaflets.filter((l) => !l.hidden));
       mutate("identity");
-      toaster({
-        content: <div className="font-bold">Welcome back!</div>,
-        type: "success",
-      });
     }
   };
   return (
@@ -85,95 +86,108 @@ export function LoginActionButton() {
       }
     >
       <div className="flex flex-col gap-2 w-xs">
-      <ToggleGroup
-        value={
-          state === "email log in" || state === "email confirm"
-            ? "log in"
-            : state
-        }
-        onChange={setState}
-        options={[
-          { value: "log in", label: "Log In" },
-          { value: "sign up", label: "Sign Up" },
-        ]}
-        fullWidth
-      />
-      <div className="accent-container flex flex-col gap-1 p-3 pt-4">
-        {state === "log in" ? (
-          <>
-            <div className="flex flex-col gap-1 text-center mx-auto leading-tight pb-2">
-              <h3>
-                Log in with <br />
-                Atmosphere account
-              </h3>
-              <AtmosphericHandleInfo
-                trigger={
-                  <div className="text-sm text-accent-contrast">
-                    What's that?
-                  </div>
-                }
+        <ToggleGroup
+          value={
+            state === "email log in" || state === "email confirm"
+              ? "log in"
+              : state
+          }
+          onChange={setState}
+          options={[
+            { value: "log in", label: "Log In" },
+            { value: "sign up", label: "Sign Up" },
+          ]}
+          fullWidth
+        />
+        <div className="accent-container flex flex-col gap-1 p-3 pt-4">
+          {state === "log in" ? (
+            <>
+              <div className="flex flex-col gap-1 text-center mx-auto leading-tight pb-2">
+                <h3>
+                  Log in with <br />
+                  Atmosphere account
+                </h3>
+                <AtmosphericHandleInfo
+                  trigger={
+                    <div className="text-sm text-accent-contrast">
+                      What's that?
+                    </div>
+                  }
+                />
+              </div>
+              <HandleInput
+                large
+                action={<GoToArrow className="text-accent-contrast" />}
+                loading={loading}
+                onSubmit={(handle) => {
+                  setLoading(true);
+                  window.location.href = `/api/oauth/login?handle=${encodeURIComponent(handle)}&redirect_url=/`;
+                }}
               />
-            </div>
-            <HandleInput
-              large
-              action={<GoToArrow className="text-accent-contrast" />}
-              onSubmit={(handle) => {
-                window.location.href = `/api/oauth/login?handle=${encodeURIComponent(handle)}&redirect_url=/`;
-              }}
-            />
-            <hr className="border-border-light mt-2 mb-1" />
-            <button
-              className="text-sm text-accent-contrast"
-              onClick={() => {
-                setState("email log in");
+              <hr className="border-border-light mt-2 mb-1" />
+              <button
+                className="text-sm text-accent-contrast"
+                onClick={() => {
+                  setState("email log in");
+                }}
+              >
+                or log in with email
+              </button>
+            </>
+          ) : state === "email log in" ? (
+            <form
+              className="flex flex-col gap-1"
+              onSubmit={(e) => {
+                e.preventDefault();
+                handleEmailSubmit();
               }}
             >
-              or log in with email
-            </button>
-          </>
-        ) : state === "email log in" ? (
-          <form className="flex flex-col gap-1" onSubmit={(e) => { e.preventDefault(); handleEmailSubmit(); }}>
-            <h3 className="text-center">Log in with Email</h3>
+              <h3 className="text-center">Log in with Email</h3>
 
-            <EmailInput
-              large
-              value={loginEmail}
-              onChange={setLoginEmail}
-              action={
-                <button type="submit">
-                  <GoToArrow className="h-fit" />
-                </button>
-              }
+              <EmailInput
+                large
+                value={loginEmail}
+                onChange={setLoginEmail}
+                loading={loading}
+                action={
+                  <button type="submit">
+                    <GoToArrow className="h-fit" />
+                  </button>
+                }
+              />
+              <hr className="border-border-light my-2" />
+              <button
+                type="button"
+                className="text-accent-contrast text-sm"
+                onClick={() => {
+                  setState("log in");
+                }}
+              >
+                or log in with Atmosphere account
+              </button>
+            </form>
+          ) : state === "email confirm" ? (
+            <EmailConfirm
+              emailValue={loginEmail}
+              loading={loading}
+              onSubmit={handleCodeSubmit}
             />
-            <hr className="border-border-light my-2" />
-            <button
-              type="button"
-              className="text-accent-contrast text-sm"
-              onClick={() => {
-                setState("log in");
-              }}
-            >
-              or log in with Atmosphere account
-            </button>
-          </form>
-        ) : state === "email confirm" ? (
-          <EmailConfirm emailValue={loginEmail} onSubmit={handleCodeSubmit} />
-        ) : (
-          <div className="text-center text-sm">
-            <h3 className="pb-1">
-              Leaflet is part of <br />
-              the Atmosphere.
-            </h3>
-            <div className="text-secondary pb-3">
-              Create an Atmosphere account on Bluesky to get started!
+          ) : (
+            <div className="text-center text-sm">
+              <h3 className="pb-1">
+                Leaflet is part of <br />
+                the Atmosphere.
+              </h3>
+              <div className="text-secondary pb-3">
+                Create an Atmosphere account on Bluesky to get started!
+              </div>
+              <ButtonPrimary className="mx-auto mb-1">
+                <BlueskyTiny /> Sign up via Bluesky
+              </ButtonPrimary>
+              <AtmosphericHandleInfo />
             </div>
-            <ButtonPrimary className="mx-auto mb-1">
-              <BlueskyTiny /> Sign up via Bluesky
-            </ButtonPrimary>
-            <AtmosphericHandleInfo />
-          </div>
-        )}
-      </div>
+          )}
+        </div>
       </div>
     </Modal>
   );
diff --git a/components/Subscribe/EmailSubscribe.tsx b/components/Subscribe/EmailSubscribe.tsx
index b63d3542..bcd6a175 100644
--- a/components/Subscribe/EmailSubscribe.tsx
+++ b/components/Subscribe/EmailSubscribe.tsx
@@ -2,6 +2,8 @@
 import * as OneTimePasswordField from "@radix-ui/react-one-time-password-field";
 import { ButtonPrimary } from "components/Buttons";
 import { Input } from "components/Input";
+import { DotLoader } from "components/utils/DotLoader";
+import { theme } from "tailwind.config";
 
 export const EmailInput = (props: {
   action: React.ReactNode;
@@ -10,22 +12,34 @@ export const EmailInput = (props: {
   value: string;
   onChange: (val: string) => void;
   disabled?: boolean;
+  loading?: boolean;
 }) => {
   return (
     <div
-      className={` input-with-border flex gap-2 w-full items-center mx-auto py-0! ${props.large && "px-2!"}`}
+      className={` input-with-border flex gap-2 w-full items-center mx-auto py-0! ${props.large && "px-2!"} `}
+      style={
+        props.loading
+          ? {
+              backgroundColor: theme.colors["border-light"],
+              color: theme.colors.tertiary,
+            }
+          : {
+              backgroundColor: theme.colors["bg-page"],
+              color: theme.colors.primary,
+            }
+      }
     >
       <Input
         autoFocus={props.autoFocus}
         className={`appearance-none! outline-none! grow ${props.large ? "py-1!" : "py-0.5 "}`}
-        disabled={props.disabled}
+        disabled={props.disabled || props.loading}
         placeholder="email@example.com"
         size={0}
         value={props.value}
         onChange={(e) => props.onChange(e.target.value)}
       />
       <div className={` text-accent-contrast flex items-center shrink-0 `}>
-        {props.action}
+        {props.loading ? <DotLoader /> : props.action}
       </div>
     </div>
   );
@@ -33,9 +47,10 @@ export const EmailInput = (props: {
 
 export const EmailConfirm = (props: {
   emailValue: string;
+  loading?: boolean;
   onSubmit: (code: string) => void;
 }) => {
-  let inputClassName = "input-with-border text-2xl w-8 h-12 text-center";
+  let inputClassName = `input-with-border text-2xl w-8 h-12 text-center ${props.loading ? "bg-border-light! text-tertiary!" : ""}`;
   return (
     <div className="flex flex-col text-center max-w-sm pb-2 text-secondary leading-snug">
       <h3>Confirm your email</h3>
diff --git a/components/Subscribe/HandleInput.tsx b/components/Subscribe/HandleInput.tsx
index 6526c829..fa1ecf03 100644
--- a/components/Subscribe/HandleInput.tsx
+++ b/components/Subscribe/HandleInput.tsx
@@ -4,6 +4,8 @@ import { Input } from "components/Input";
 import { Combobox, ComboboxResult } from "components/Combobox";
 import { useState } from "react";
 import { useDebouncedEffect } from "src/hooks/useDebouncedEffect";
+import { DotLoader } from "components/utils/DotLoader";
+import { theme } from "tailwind.config";
 
 type ActorSuggestion = {
   handle: string;
@@ -17,6 +19,7 @@ export const HandleInput = (props: {
   action?: React.ReactNode;
   className?: string;
   large?: boolean;
+  loading?: boolean;
   onSubmit?: (handle: string) => void;
 }) => {
   let [handleValue, setHandleValue] = useState("");
@@ -63,7 +66,7 @@ export const HandleInput = (props: {
 
   return (
     <Combobox
-      open={dropdownOpen}
+      open={dropdownOpen && !props.loading}
       onOpenChange={(open) => {
         if (!open) {
           setDropdownOpen(false);
@@ -80,6 +83,17 @@ export const HandleInput = (props: {
       trigger={
         <div
           className={`handleInput input-with-border relative py-0! flex items-center gap-1 w-full ${props.large && "px-2!"} ${props.className}`}
+          style={
+            props.loading
+              ? {
+                  backgroundColor: theme.colors["border-light"],
+                  color: theme.colors.tertiary,
+                }
+              : {
+                  backgroundColor: theme.colors["bg-page"],
+                  color: theme.colors.primary,
+                }
+          }
         >
           <div className="text-tertiary text-center shrink-0 flex justify-end h-full items-center">
             @
@@ -94,8 +108,11 @@ export const HandleInput = (props: {
             onClick={(e) => e.stopPropagation()}
             onPointerDown={(e) => e.stopPropagation()}
             autoComplete="off"
+            disabled={props.loading}
           />
-          {props.onSubmit ? (
+          {props.loading ? (
+            <DotLoader />
+          ) : props.onSubmit ? (
             <button
               type="button"
               onClick={(e) => {
-- 
2.51.2