From aca5300600401b12a8f039bdb9fa0cb6fa3515aa Mon Sep 17 00:00:00 2001
From: Antra1705 <antra.1705@gmail.com>
Date: Mon, 8 Jun 2026 15:40:15 +0530
Subject: [PATCH] feat(ux): add loading and disabled states for async action
 buttons

---
 src/app/dashboard/settings/page.tsx   | 17 ++++++----
 src/app/rooms/[roomId]/RoomClient.tsx | 26 ++++++++++-----
 src/components/ConfirmModal.tsx       | 14 +++++---
 src/components/GoalTracker.tsx        | 48 +++++++++++++++++----------
 src/components/ProjectMetrics.tsx     | 23 +++++++++----
 src/components/StreakTracker.tsx      | 21 ++++++------
 src/components/TodayFocusHero.tsx     | 25 ++++++++++----
 7 files changed, 112 insertions(+), 62 deletions(-)

diff --git a/src/app/dashboard/settings/page.tsx b/src/app/dashboard/settings/page.tsx
index 40611b095..08428c49c 100644
--- a/src/app/dashboard/settings/page.tsx
+++ b/src/app/dashboard/settings/page.tsx
@@ -1127,20 +1127,20 @@ function SettingsPageContent() {
                       <button
                         type="button"
                         onClick={() => handleMovePin(index, "up")}
-                        disabled={index === 0}
+                        disabled={index === 0 || saving}
                         title="Move Up"
                         aria-label={`Move ${repoName} up`}
-                        className="p-1.5 rounded-lg border border-[var(--border)] hover:bg-[var(--control-hover)] text-[var(--card-foreground)] disabled:opacity-40"
+                        className="p-1.5 rounded-lg border border-[var(--border)] hover:bg-[var(--control-hover)] text-[var(--card-foreground)] disabled:opacity-40 disabled:cursor-not-allowed"
                       >
                         ↑
                       </button>
                       <button
                         type="button"
                         onClick={() => handleMovePin(index, "down")}
-                        disabled={index === (settings.pinned_repos || []).length - 1}
+                        disabled={index === (settings.pinned_repos || []).length - 1 || saving}
                         title="Move Down"
                         aria-label={`Move ${repoName} down`}
-                        className="p-1.5 rounded-lg border border-[var(--border)] hover:bg-[var(--control-hover)] text-[var(--card-foreground)] disabled:opacity-40"
+                        className="p-1.5 rounded-lg border border-[var(--border)] hover:bg-[var(--control-hover)] text-[var(--card-foreground)] disabled:opacity-40 disabled:cursor-not-allowed"
                       >
                         ↓
                       </button>
@@ -1149,8 +1149,9 @@ function SettingsPageContent() {
                       <button
                         type="button"
                         onClick={() => handleUnpinRepo(repoName)}
+                        disabled={saving}
                         aria-label={`Unpin ${repoName}`}
-                        className="ml-2 rounded-lg border border-[var(--destructive-muted-border)] hover:bg-[var(--destructive-muted)] px-3 py-1.5 text-xs font-semibold text-[var(--destructive)]"
+                        className="ml-2 rounded-lg border border-[var(--destructive-muted-border)] hover:bg-[var(--destructive-muted)] px-3 py-1.5 text-xs font-semibold text-[var(--destructive)] disabled:opacity-50 disabled:cursor-not-allowed"
                       >
                         Unpin
                       </button>
@@ -1171,9 +1172,10 @@ function SettingsPageContent() {
                 type="text"
                 value={repoSearchQuery}
                 onChange={(e) => setRepoSearchQuery(e.target.value)}
+                disabled={saving}
                 placeholder="Type to search your repositories..."
                 aria-label="Search repositories to pin"
-                className="w-full rounded-lg border border-[var(--border)] bg-[var(--control)] px-4 py-2 text-sm text-[var(--card-foreground)] placeholder:text-[var(--muted-foreground)] focus-visible:ring-2 focus-visible:ring-[var(--accent)] mb-4"
+                className="w-full rounded-lg border border-[var(--border)] bg-[var(--control)] px-4 py-2 text-sm text-[var(--card-foreground)] placeholder:text-[var(--muted-foreground)] focus-visible:ring-2 focus-visible:ring-[var(--accent)] mb-4 disabled:opacity-50 disabled:cursor-not-allowed"
               />
 
               {loadingRepos ? (
@@ -1200,8 +1202,9 @@ function SettingsPageContent() {
                         <button
                           type="button"
                           onClick={() => handlePinRepo(repoName)}
+                          disabled={saving}
                           aria-label={`Pin ${repoName}`}
-                          className="rounded-lg bg-[var(--accent)] text-[var(--accent-foreground)] px-3 py-1 text-xs font-semibold hover:opacity-90 transition-opacity"
+                          className="rounded-lg bg-[var(--accent)] text-[var(--accent-foreground)] px-3 py-1 text-xs font-semibold hover:opacity-90 transition-opacity disabled:opacity-50 disabled:cursor-not-allowed"
                         >
                           Pin
                         </button>
diff --git a/src/app/rooms/[roomId]/RoomClient.tsx b/src/app/rooms/[roomId]/RoomClient.tsx
index 6d00aa88b..2214678f3 100644
--- a/src/app/rooms/[roomId]/RoomClient.tsx
+++ b/src/app/rooms/[roomId]/RoomClient.tsx
@@ -22,6 +22,7 @@ export default function RoomClient({
   const router = useRouter();
   const [messages, setMessages] = useState<RoomMessage[]>(initialMessages);
   const [members, setMembers] = useState<RoomMember[]>(initialMembers);
+  const [deleting, setDeleting] = useState(false);
 
   function handleSent(msg: RoomMessage) {
     setMessages((prev) => [...prev, msg]);
@@ -42,12 +43,20 @@ export default function RoomClient({
 
   async function handleDeleteRoom() {
     if (!confirm('Are you sure you want to delete this room? This cannot be undone.')) return;
-    const res = await fetch(`/api/rooms/${room.id}`, { method: 'DELETE' });
-    if (res.ok) {
-      router.push('/rooms');
-    } else {
-      const data = await res.json();
-      alert(data.error ?? 'Failed to delete room');
+    setDeleting(true);
+    try {
+      const res = await fetch(`/api/rooms/${room.id}`, { method: 'DELETE' });
+      if (res.ok) {
+        router.push('/rooms');
+      } else {
+        const data = await res.json();
+        alert(data.error ?? 'Failed to delete room');
+      }
+    } catch (e) {
+      console.error(e);
+      alert('Failed to delete room. Please check your connection.');
+    } finally {
+      setDeleting(false);
     }
   }
 
@@ -75,9 +84,10 @@ export default function RoomClient({
         {room.is_owner && (
           <button
             onClick={handleDeleteRoom}
-            className="text-xs px-3 py-1.5 bg-red-600 text-white rounded-lg hover:bg-red-700"
+            disabled={deleting}
+            className="text-xs px-3 py-1.5 bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed"
           >
-            Delete Room
+            {deleting ? 'Deleting...' : 'Delete Room'}
           </button>
         )}
       </header>
diff --git a/src/components/ConfirmModal.tsx b/src/components/ConfirmModal.tsx
index c04a28758..5b37902f2 100644
--- a/src/components/ConfirmModal.tsx
+++ b/src/components/ConfirmModal.tsx
@@ -10,6 +10,7 @@ interface ConfirmModalProps {
   cancelLabel?: string;
   onConfirm: () => void;
   onCancel: () => void;
+  disabled?: boolean;
 }
 
 export default function ConfirmModal({
@@ -20,6 +21,7 @@ export default function ConfirmModal({
   cancelLabel = "Cancel",
   onConfirm,
   onCancel,
+  disabled = false,
 }: ConfirmModalProps) {
   const modalRef = useRef<HTMLDivElement>(null);
 
@@ -27,7 +29,7 @@ export default function ConfirmModal({
     if (!isOpen) return;
 
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
+      if (e.key === "Escape" && !disabled) {
         onCancel();
       }
     };
@@ -40,7 +42,7 @@ export default function ConfirmModal({
       document.removeEventListener("keydown", handleKeyDown);
       document.body.style.overflow = "unset";
     };
-  }, [isOpen, onCancel]);
+  }, [isOpen, onCancel, disabled]);
 
   if (!isOpen) return null;
 
@@ -49,7 +51,7 @@ export default function ConfirmModal({
       {/* Backdrop */}
       <div 
         className="fixed inset-0 bg-black/60 backdrop-blur-sm transition-opacity" 
-        onClick={onCancel}
+        onClick={disabled ? undefined : onCancel}
         aria-hidden="true"
       />
       
@@ -73,14 +75,16 @@ export default function ConfirmModal({
           <button
             type="button"
             onClick={onCancel}
-            className="w-full sm:w-auto rounded-xl border border-[var(--border)] bg-[var(--control)] px-5 py-2.5 text-sm font-semibold text-[var(--card-foreground)] transition-all hover:bg-[var(--card-muted)] active:scale-95"
+            disabled={disabled}
+            className="w-full sm:w-auto rounded-xl border border-[var(--border)] bg-[var(--control)] px-5 py-2.5 text-sm font-semibold text-[var(--card-foreground)] transition-all hover:bg-[var(--card-muted)] active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed disabled:active:scale-100"
           >
             {cancelLabel}
           </button>
           <button
             type="button"
             onClick={onConfirm}
-            className="w-full sm:w-auto rounded-xl bg-[var(--accent)] px-5 py-2.5 text-sm font-semibold text-[var(--accent-foreground)] transition-all hover:opacity-90 active:scale-95 shadow-lg shadow-[var(--accent)]/20"
+            disabled={disabled}
+            className="w-full sm:w-auto rounded-xl bg-[var(--accent)] px-5 py-2.5 text-sm font-semibold text-[var(--accent-foreground)] transition-all hover:opacity-90 active:scale-95 shadow-lg shadow-[var(--accent)]/20 disabled:opacity-50 disabled:cursor-not-allowed disabled:active:scale-100"
           >
             {confirmLabel}
           </button>
diff --git a/src/components/GoalTracker.tsx b/src/components/GoalTracker.tsx
index 0e2f68e67..5d164ede5 100644
--- a/src/components/GoalTracker.tsx
+++ b/src/components/GoalTracker.tsx
@@ -51,6 +51,7 @@ export function useGoalTracker() {
   const [confirmingId, setConfirmingId] = useState<string | null>(null);
   const [deletingId, setDeletingId] = useState<string | null>(null);
   const [deleteError, setDeleteError] = useState<string | null>(null);
+  const [incrementingId, setIncrementingId] = useState<string | null>(null);
 
   const [activeConfettiGoalId, setActiveConfettiGoalId] = useState<string | null>(null);
   const prevGoalsRef = useRef<Map<string, boolean>>(new Map());
@@ -177,22 +178,21 @@ export function useGoalTracker() {
 
   async function handleDelete(id: string) {
     const previousGoals = goals;
-    setGoals((prev) => prev.filter((g) => g.id !== id));
-    setConfirmingId(null);
     setDeletingId(id);
     setDeleteError(null);
 
     try {
       const res = await fetch(`/api/goals/${id}`, { method: "DELETE" });
       if (!res.ok) {
-        setGoals(previousGoals);
         setDeleteError("Failed to delete goal. Please try again.");
+      } else {
+        setGoals((prev) => prev.filter((g) => g.id !== id));
       }
     } catch (e) {
-      setGoals(previousGoals);
       setDeleteError("Failed to delete goal. Please check your connection.");
     } finally {
       setDeletingId(null);
+      setConfirmingId(null);
     }
   }
 
@@ -280,6 +280,8 @@ export function useGoalTracker() {
     deletingId,
     deleteError,
     setDeleteError,
+    incrementingId,
+    setIncrementingId,
     activeConfettiGoalId,
     handleSync,
     handleCreate,
@@ -315,6 +317,8 @@ export default function GoalTracker() {
     deletingId,
     deleteError,
     setDeleteError,
+    incrementingId,
+    setIncrementingId,
     activeConfettiGoalId,
     handleSync,
     handleCreate,
@@ -559,24 +563,31 @@ export default function GoalTracker() {
                         onClick={async () => {
                           const newCurrent = goal.current + 1;
                           if (newCurrent > goal.target) return;
-                          const res = await fetch(`/api/goals/${goal.id}`, {
-                            method: "PATCH",
-                            headers: { "Content-Type": "application/json" },
-                            body: JSON.stringify({ current: newCurrent }),
-                          });
-                          if (res.ok) {
-                            setGoals((prevGoals) =>
-                              prevGoals.map((g) =>
-                                g.id === goal.id ? { ...g, current: newCurrent } : g
-                              )
-                            );
+                          setIncrementingId(goal.id);
+                          try {
+                            const res = await fetch(`/api/goals/${goal.id}`, {
+                              method: "PATCH",
+                              headers: { "Content-Type": "application/json" },
+                              body: JSON.stringify({ current: newCurrent }),
+                            });
+                            if (res.ok) {
+                              setGoals((prevGoals) =>
+                                prevGoals.map((g) =>
+                                  g.id === goal.id ? { ...g, current: newCurrent } : g
+                                )
+                              );
+                            }
+                          } catch (e) {
+                            console.error("Failed to increment goal:", e);
+                          } finally {
+                            setIncrementingId(null);
                           }
                         }}
-                        disabled={goal.current >= goal.target}
+                        disabled={goal.current >= goal.target || incrementingId === goal.id}
                         aria-label={`Increment "${goal.title}" progress by 1`}
-                        className="rounded bg-blue-600 px-2 py-1 text-xs text-white hover:bg-blue-700 disabled:opacity-50"
+                        className="rounded bg-blue-600 px-2 py-1 text-xs text-white hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
                       >
-                        +1
+                        {incrementingId === goal.id ? "..." : "+1"}
                       </button>
                     )}
 
@@ -784,6 +795,7 @@ export default function GoalTracker() {
         message={`Are you sure you want to permanently remove your "${activeConfirmingGoal?.title || 'active coding'}" goal? This will erase all gathered progress history numbers parameters.`}
         confirmLabel={deletingId ? "Deleting..." : "Permanently Delete"}
         cancelLabel="Keep Goal"
+        disabled={deletingId !== null}
         onConfirm={() => {
           if (confirmingId) handleDelete(confirmingId);
         }}
diff --git a/src/components/ProjectMetrics.tsx b/src/components/ProjectMetrics.tsx
index 323a703a9..5fcd3a56a 100644
--- a/src/components/ProjectMetrics.tsx
+++ b/src/components/ProjectMetrics.tsx
@@ -51,6 +51,7 @@ export default function ProjectMetrics() {
   });
   const [connecting, setConnecting] = useState(false);
   const [connectionError, setConnectionError] = useState<string | null>(null);
+  const [disconnecting, setDisconnecting] = useState(false);
 
   const fetchData = useCallback(() => {
     setLoading(true);
@@ -111,11 +112,18 @@ export default function ProjectMetrics() {
   }
 
   async function handleDisconnect() {
-    await fetch("/api/integrations/jira/credentials", {
-      method: "DELETE",
-    });
-    setData(null);
-    setError(null);
+    setDisconnecting(true);
+    try {
+      await fetch("/api/integrations/jira/credentials", {
+        method: "DELETE",
+      });
+      setData(null);
+      setError(null);
+    } catch (e) {
+      console.error("Failed to disconnect Jira:", e);
+    } finally {
+      setDisconnecting(false);
+    }
   }
 
   if (loading) {
@@ -404,9 +412,10 @@ export default function ProjectMetrics() {
         <button
           type="button"
           onClick={handleDisconnect}
-          className="text-xs text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
+          disabled={disconnecting}
+          className="text-xs text-[var(--muted-foreground)] hover:text-[var(--foreground)] disabled:opacity-50 disabled:cursor-not-allowed"
         >
-          Disconnect
+          {disconnecting ? "Disconnecting..." : "Disconnect"}
         </button>
       </div>
       <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
diff --git a/src/components/StreakTracker.tsx b/src/components/StreakTracker.tsx
index 6c0b71383..fd512ed69 100644
--- a/src/components/StreakTracker.tsx
+++ b/src/components/StreakTracker.tsx
@@ -682,7 +682,7 @@ export default function StreakTracker() {
             </p>
           )}
 
-          {!freezeLoading && freeze?.hasFreeze && (
+          {freeze && freeze.hasFreeze && (
             <div className="mt-4 flex items-center justify-between rounded-lg border border-[var(--accent)]/30 bg-[var(--accent-soft)] px-4 py-3">
               <div className="flex items-center gap-2">
                 <CheckCircle size={18} className="text-[var(--accent)]" aria-hidden="true" />
@@ -694,16 +694,16 @@ export default function StreakTracker() {
                   <button
                     type="button"
                     onClick={handleCancelFreeze}
-                    disabled={cancelling}
-                    className="rounded-md bg-[var(--destructive)]/10 px-2.5 py-1 text-xs font-medium text-[var(--destructive)] transition hover:bg-[var(--destructive)]/20 disabled:opacity-60"
+                    disabled={cancelling || freezeLoading}
+                    className="rounded-md bg-[var(--destructive)]/10 px-2.5 py-1 text-xs font-medium text-[var(--destructive)] transition hover:bg-[var(--destructive)]/20 disabled:opacity-60 disabled:cursor-not-allowed"
                   >
                     {cancelling ? "Removing..." : "Yes, remove"}
                   </button>
                   <button
                     type="button"
                     onClick={() => setConfirmCancel(false)}
-                    disabled={cancelling}
-                    className="rounded-md border border-[var(--border)] px-2.5 py-1 text-xs font-medium text-[var(--muted-foreground)] transition hover:bg-[var(--control)]"
+                    disabled={cancelling || freezeLoading}
+                    className="rounded-md border border-[var(--border)] px-2.5 py-1 text-xs font-medium text-[var(--muted-foreground)] transition hover:bg-[var(--control)] disabled:opacity-50 disabled:cursor-not-allowed"
                   >
                     Keep
                   </button>
@@ -712,7 +712,8 @@ export default function StreakTracker() {
                 <button
                   type="button"
                   onClick={handleCancelFreeze}
-                  className="rounded-md border border-[var(--border)] px-3 py-1 text-xs font-medium text-[var(--muted-foreground)] transition hover:bg-[var(--control)]"
+                  disabled={cancelling || freezeLoading}
+                  className="rounded-md border border-[var(--border)] px-3 py-1 text-xs font-medium text-[var(--muted-foreground)] transition hover:bg-[var(--control)] disabled:opacity-50 disabled:cursor-not-allowed"
                 >
                   Cancel freeze
                 </button>
@@ -720,7 +721,7 @@ export default function StreakTracker() {
             </div>
           )}
 
-          {!freezeLoading && !freeze?.hasFreeze && (
+          {freeze && !freeze.hasFreeze && (
             <div className="mt-4 flex items-center justify-between rounded-lg border border-[var(--border)] bg-[var(--control)] px-4 py-3">
               <div className="flex items-center gap-2">
                 <span className="text-sm font-medium text-[var(--foreground)]">Streak Freeze</span>
@@ -742,13 +743,13 @@ export default function StreakTracker() {
               <button
                 type="button"
                 onClick={handleApplyFreeze}
-                disabled={freezeLoading || freeze?.hasFreeze}
-                className={`rounded-md px-3 py-1 text-xs font-medium transition ${freezeLoading || freeze?.hasFreeze
+                disabled={freezeLoading || cancelling}
+                className={`rounded-md px-3 py-1 text-xs font-medium transition ${freezeLoading || cancelling
                     ? "cursor-not-allowed opacity-50 bg-[var(--accent)]"
                     : "bg-[var(--accent)] hover:opacity-90"
                   } text-[var(--accent-foreground)]`}
               >
-                {freeze?.hasFreeze ? "Freeze Active" : "Freeze Streak"}
+                {freezeLoading ? "Freezing..." : "Freeze Streak"}
               </button>
             </div>
           )}
diff --git a/src/components/TodayFocusHero.tsx b/src/components/TodayFocusHero.tsx
index f3f741ffd..e1e05e3f7 100644
--- a/src/components/TodayFocusHero.tsx
+++ b/src/components/TodayFocusHero.tsx
@@ -42,6 +42,8 @@ export default function TodayFocusHero({ userName }: TodayFocusHeroProps) {
   const [greeting, setGreeting] = useState<"morning" | "afternoon" | "evening">("morning");
   const [todayKey, setTodayKey] = useState("");
   const [isMounted, setIsMounted] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [isClearing, setIsClearing] = useState(false);
 
   const greetingLabel = useMemo(() => {
     const base =
@@ -105,6 +107,7 @@ export default function TodayFocusHero({ userName }: TodayFocusHeroProps) {
     const trimmedGoal = inputValue.trim();
     if (!trimmedGoal || !todayKey) return;
 
+    setIsSaving(true);
     try {
       window.localStorage.setItem(todayKey, trimmedGoal);
     } catch (e) {}
@@ -122,12 +125,15 @@ export default function TodayFocusHero({ userName }: TodayFocusHeroProps) {
       });
     } catch (err) {
       console.error("Failed to save daily focus", err);
+    } finally {
+      setIsSaving(false);
     }
   }
 
   async function handleClear() {
     if (!todayKey) return;
 
+    setIsClearing(true);
     try {
       window.localStorage.removeItem(todayKey);
     } catch (e) {}
@@ -143,6 +149,8 @@ export default function TodayFocusHero({ userName }: TodayFocusHeroProps) {
       });
     } catch (err) {
       console.error("Failed to clear daily focus", err);
+    } finally {
+      setIsClearing(false);
     }
   }
 
@@ -219,9 +227,10 @@ export default function TodayFocusHero({ userName }: TodayFocusHeroProps) {
                 <button
                   type="button"
                   onClick={handleClear}
-                  className="inline-flex w-full items-center justify-center rounded-xl border border-[var(--destructive-muted-border)] bg-[var(--destructive-muted)] px-4 py-3 text-sm font-medium text-[var(--destructive)] transition hover:opacity-90 sm:w-auto"
+                  disabled={isClearing || isSaving}
+                  className="inline-flex w-full items-center justify-center rounded-xl border border-[var(--destructive-muted-border)] bg-[var(--destructive-muted)] px-4 py-3 text-sm font-medium text-[var(--destructive)] transition hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed sm:w-auto"
                 >
-                  Clear
+                  {isClearing ? "Clearing..." : "Clear"}
                 </button>
               </div>
             </div>
@@ -242,8 +251,9 @@ export default function TodayFocusHero({ userName }: TodayFocusHeroProps) {
                   <input
                     value={inputValue}
                     onChange={(event) => setInputValue(event.target.value)}
+                    disabled={isSaving || isClearing}
                     placeholder="Write your main dev goal for today..."
-                    className="w-full rounded-xl border border-[var(--border)] bg-[var(--background)] px-4 py-3 text-sm text-[var(--foreground)] shadow-sm transition placeholder:text-[var(--muted-foreground)]"
+                    className="w-full rounded-xl border border-[var(--border)] bg-[var(--background)] px-4 py-3 text-sm text-[var(--foreground)] shadow-sm transition placeholder:text-[var(--muted-foreground)] disabled:opacity-50 disabled:cursor-not-allowed"
                   />
                 </label>
 
@@ -251,18 +261,19 @@ export default function TodayFocusHero({ userName }: TodayFocusHeroProps) {
                   <button
                     type="button"
                     onClick={handleSave}
-                    disabled={!inputValue.trim()}
+                    disabled={!inputValue.trim() || isSaving || isClearing}
                     className="primary-button inline-flex w-full items-center justify-center rounded-xl px-4 py-3 text-sm font-semibold disabled:cursor-not-allowed disabled:opacity-60 sm:w-auto lg:w-full xl:w-auto"
                   >
-                    Save
+                    {isSaving ? "Saving..." : "Save"}
                   </button>
                   {goal ? (
                     <button
                       type="button"
                       onClick={handleClear}
-                      className="secondary-button inline-flex w-full items-center justify-center rounded-xl px-4 py-3 text-sm font-medium sm:w-auto lg:w-full xl:w-auto"
+                      disabled={isSaving || isClearing}
+                      className="secondary-button inline-flex w-full items-center justify-center rounded-xl px-4 py-3 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed sm:w-auto lg:w-full xl:w-auto"
                     >
-                      Clear
+                      {isClearing ? "Clearing..." : "Clear"}
                     </button>
                   ) : null}
                 </div>