From ad8a12750b929b5dbc734bc89563dd4eab5ba756 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 29 Mar 2026 22:38:31 +0000
Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20loading=20s?=
 =?UTF-8?q?pinner=20to=20CommentsPanel=20post=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: aarjava <218419324+aarjava@users.noreply.github.com>
---
 .Jules/palette.md                | 4 ++++
 src/components/CommentsPanel.tsx | 7 +++++--
 2 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 00000000..29dbb2bf
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,4 @@
+
+## 2024-05-30 - Loading States on Async Buttons
+**Learning:** Providing immediate visual feedback during asynchronous actions is crucial for a smooth user experience. Without it, users may think the system is unresponsive. Adding a loading spinner (`Loader2` from `lucide-react`) and changing the text (e.g., from "Post" to "Posting...") provides clear confirmation that the action is being processed. Furthermore, toggling the `aria-busy` attribute correctly announces this temporary loading state to assistive technologies without altering visual presentation.
+**Action:** Always implement a visual loading state (like a spinner) and set `aria-busy="true"` on buttons that trigger asynchronous operations, ensuring screen readers and visual users alike are informed of the system status.
diff --git a/src/components/CommentsPanel.tsx b/src/components/CommentsPanel.tsx
index 2a595884..5f2b6d9a 100644
--- a/src/components/CommentsPanel.tsx
+++ b/src/components/CommentsPanel.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import { useEffect, useState } from 'react'
+import { Loader2 } from 'lucide-react'
 import type { CommentRecord } from '@/lib/db/types'
 
 type Props = { entityType: 'event' | 'insight'; entityId: string }
@@ -62,9 +63,11 @@ export default function CommentsPanel({ entityType, entityId }: Props) {
         <button
           onClick={post}
           disabled={loading || !text.trim()}
-          className="rounded-md bg-[#6C63FF] px-3 py-2 text-xs font-semibold text-white disabled:opacity-50 hover:bg-[#5A52E6] transition-colors duration-150"
+          aria-busy={loading ? 'true' : undefined}
+          className="inline-flex items-center justify-center gap-1.5 rounded-md bg-[#6C63FF] px-3 py-2 text-xs font-semibold text-white disabled:opacity-50 hover:bg-[#5A52E6] transition-colors duration-150"
         >
-          Post
+          {loading && <Loader2 className="size-3.5 animate-spin" aria-hidden="true" />}
+          {loading ? 'Posting...' : 'Post'}
         </button>
       </div>
     </div>

From 4045d45732917959863cb934baa7d0e3593cec3a Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 29 Mar 2026 22:51:33 +0000
Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20loading=20s?=
 =?UTF-8?q?pinner=20to=20CommentsPanel=20post=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: aarjava <218419324+aarjava@users.noreply.github.com>

From 2a1e6bcabfc9261a8eb3e7d18677ee8b3cd0c4e7 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 29 Mar 2026 23:02:10 +0000
Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20loading=20s?=
 =?UTF-8?q?pinner=20to=20CommentsPanel=20post=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: aarjava <218419324+aarjava@users.noreply.github.com>
---
 .Jules/palette.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 29dbb2bf..4d86f8d1 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -1,4 +1,4 @@
-
 ## 2024-05-30 - Loading States on Async Buttons
+
 **Learning:** Providing immediate visual feedback during asynchronous actions is crucial for a smooth user experience. Without it, users may think the system is unresponsive. Adding a loading spinner (`Loader2` from `lucide-react`) and changing the text (e.g., from "Post" to "Posting...") provides clear confirmation that the action is being processed. Furthermore, toggling the `aria-busy` attribute correctly announces this temporary loading state to assistive technologies without altering visual presentation.
 **Action:** Always implement a visual loading state (like a spinner) and set `aria-busy="true"` on buttons that trigger asynchronous operations, ensuring screen readers and visual users alike are informed of the system status.

From 37041f3cb69b086455dd94d4c86445f4ad8fdbd7 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 29 Mar 2026 23:11:40 +0000
Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20loading=20s?=
 =?UTF-8?q?pinner=20to=20CommentsPanel=20post=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: aarjava <218419324+aarjava@users.noreply.github.com>