From 031d7009ca447f9cd6bf31599d9fda09f1b0d71b Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Sat, 14 Mar 2026 20:43:04 -0400
Subject: [PATCH] add loaders

---
 .../actions/ShareOptions/DomainOptions.tsx    |  6 +++-
 components/Domains/AddDomainForm.tsx          |  8 ++++--
 components/Domains/DomainSettingsView.tsx     |  5 +++-
 components/Domains/PublicationDomains.tsx     | 28 ++++++++++++++-----
 4 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/app/[leaflet_id]/actions/ShareOptions/DomainOptions.tsx b/app/[leaflet_id]/actions/ShareOptions/DomainOptions.tsx
index d7aa54ff..03629244 100644
--- a/app/[leaflet_id]/actions/ShareOptions/DomainOptions.tsx
+++ b/app/[leaflet_id]/actions/ShareOptions/DomainOptions.tsx
@@ -15,6 +15,7 @@ import { useReplicache } from "src/replicache";
 import { AddDomainForm } from "components/Domains/AddDomainForm";
 import { DomainSettingsView } from "components/Domains/DomainSettingsView";
 import { AddTiny } from "components/Icons/AddTiny";
+import { DotLoader } from "components/utils/DotLoader";
 
 type DomainMenuState =
   | { state: "default" }
@@ -81,6 +82,7 @@ const DomainOptions = (props: {
   let { identity, mutate: mutateIdentity } = useIdentityData();
   let { permission_token } = useReplicache();
 
+  let [loading, setLoading] = useState(false);
   let toaster = useToaster();
   let publishLink = useReadOnlyShareLink();
 
@@ -106,6 +108,7 @@ const DomainOptions = (props: {
 
   async function doPublish() {
     if (!selectedDomain || !publishLink) return;
+    setLoading(true);
     let route = "/" + selectedRoute;
 
     // Optimistic update
@@ -209,6 +212,7 @@ const DomainOptions = (props: {
         <ButtonPrimary
           id="publish-to-domain"
           disabled={
+            loading ||
             routeConflict ||
             (domains?.[0]
               ? domains[0].domain === selectedDomain &&
@@ -217,7 +221,7 @@ const DomainOptions = (props: {
           }
           onClick={doPublish}
         >
-          Publish!
+          {loading ? <DotLoader /> : "Publish!"}
         </ButtonPrimary>
       </div>
     </div>
diff --git a/components/Domains/AddDomainForm.tsx b/components/Domains/AddDomainForm.tsx
index 7253a6e5..3e72e652 100644
--- a/components/Domains/AddDomainForm.tsx
+++ b/components/Domains/AddDomainForm.tsx
@@ -5,12 +5,14 @@ import { Input } from "components/Input";
 import { useSmoker } from "components/Toast";
 import { useIdentityData } from "components/IdentityProvider";
 import { addDomain } from "actions/domains/addDomain";
+import { DotLoader } from "components/utils/DotLoader";
 
 export function AddDomainForm(props: {
   onDomainAdded: (domain: string) => void;
   onBack: () => void;
 }) {
   let [value, setValue] = useState("");
+  let [loading, setLoading] = useState(false);
   let { mutate } = useIdentityData();
   let smoker = useSmoker();
 
@@ -39,10 +41,12 @@ export function AddDomainForm(props: {
           Back
         </button>
         <ButtonPrimary
-          disabled={!value}
+          disabled={!value || loading}
           onMouseDown={async (e) => {
+            setLoading(true);
             let { error } = await addDomain(value);
             if (error) {
+              setLoading(false);
               smoker({
                 error: true,
                 text:
@@ -62,7 +66,7 @@ export function AddDomainForm(props: {
             props.onDomainAdded(value);
           }}
         >
-          Verify Domain
+          {loading ? <DotLoader /> : "Verify Domain"}
         </ButtonPrimary>
       </div>
     </div>
diff --git a/components/Domains/DomainSettingsView.tsx b/components/Domains/DomainSettingsView.tsx
index 02782036..dda6e99f 100644
--- a/components/Domains/DomainSettingsView.tsx
+++ b/components/Domains/DomainSettingsView.tsx
@@ -214,6 +214,7 @@ function DeleteDomainButton(props: {
   mutateIdentity: ReturnType<typeof useIdentityData>["mutate"];
 }) {
   let [confirming, setConfirming] = useState(false);
+  let [loading, setLoading] = useState(false);
 
   if (!props.onDeleteDomain) return null;
 
@@ -247,7 +248,9 @@ function DeleteDomainButton(props: {
         </button>
         <ButtonPrimary
           compact
+          disabled={loading}
           onMouseDown={async () => {
+            setLoading(true);
             mutateIdentityData(props.mutateIdentity, (draft) => {
               draft.custom_domains = draft.custom_domains.filter(
                 (d) => d.domain !== props.domain,
@@ -257,7 +260,7 @@ function DeleteDomainButton(props: {
             await deleteDomain({ domain: props.domain });
           }}
         >
-          Delete
+          {loading ? <DotLoader /> : "Delete"}
         </ButtonPrimary>
       </div>
     </div>
diff --git a/components/Domains/PublicationDomains.tsx b/components/Domains/PublicationDomains.tsx
index 9105703c..4aeed96a 100644
--- a/components/Domains/PublicationDomains.tsx
+++ b/components/Domains/PublicationDomains.tsx
@@ -20,6 +20,7 @@ import { DomainSettingsView } from "./DomainSettingsView";
 import { PinTiny } from "components/Icons/PinTiny";
 import { LoadingTiny } from "components/Icons/LoadingTiny";
 import { AddTiny } from "components/Icons/AddTiny";
+import { DotLoader } from "components/utils/DotLoader";
 import type { CustomDomain } from "./DomainList";
 
 type State =
@@ -138,6 +139,7 @@ function PubDomainRow(props: {
   onSettings: () => void;
 }) {
   let { pending } = useDomainStatus(props.domain);
+  let [loading, setLoading] = useState(false);
 
   return (
     <div className="text-sm text-secondary relative w-full flex items-center justify-between px-[6px] py-1 border rounded-md border-border-light">
@@ -170,19 +172,28 @@ function PubDomainRow(props: {
         ) : (
           <button
             type="button"
+            disabled={loading}
             onClick={async () => {
+              setLoading(true);
               await updatePublicationBasePath({
                 uri: props.publication_uri,
                 base_path: props.domain,
               });
               mutate("publication-data");
+              setLoading(false);
             }}
             className="group/domain flex gap-1 items-center rounded-full bg-none w-max font-bold px-1 py-0.5 hover:bg-accent-1 hover:text-accent-2 border-transparent outline-solid outline-transparent hover:outline-accent-1 selected-outline"
           >
-            <p className="group-hover/domain:block hidden w-max pl-1">
-              set as default
-            </p>
-            <PinTiny className="text-secondary group-hover/domain:text-accent-2 shrink-0" />
+            {loading ? (
+              <DotLoader />
+            ) : (
+              <>
+                <p className="group-hover/domain:block hidden w-max pl-1">
+                  set as default
+                </p>
+                <PinTiny className="text-secondary group-hover/domain:text-accent-2 shrink-0" />
+              </>
+            )}
           </button>
         )}
       </div>
@@ -200,8 +211,10 @@ function UnassignedDomainRow(props: {
   let { mutate: mutateIdentity } = useIdentityData();
   let assignment = getDomainAssignment(props.domainData);
   let [confirming, setConfirming] = useState(false);
+  let [loading, setLoading] = useState(false);
 
   async function doAssign() {
+    setLoading(true);
     mutateIdentityData(mutateIdentity, (draft) => {
       let domain = draft.custom_domains.find(
         (d) => d.domain === props.domainData.domain,
@@ -248,6 +261,7 @@ function UnassignedDomainRow(props: {
           <button
             className="text-accent-contrast text-xs font-bold"
             type="button"
+            disabled={loading}
             onClick={() => {
               if (assignment.type === "document") {
                 setConfirming(true);
@@ -256,7 +270,7 @@ function UnassignedDomainRow(props: {
               }
             }}
           >
-            assign to this publication
+            {loading ? <DotLoader /> : "assign to this publication"}
           </button>
         )}
       </div>
@@ -275,8 +289,8 @@ function UnassignedDomainRow(props: {
             >
               Cancel
             </button>
-            <ButtonPrimary compact onMouseDown={doAssign}>
-              Reassign
+            <ButtonPrimary compact disabled={loading} onMouseDown={doAssign}>
+              {loading ? <DotLoader /> : "Reassign"}
             </ButtonPrimary>
           </div>
         </div>
-- 
2.51.2