🎨 Palette: Add loading spinner to CommentsPanel post button

.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.

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>