Show attachment download progress

src/components/messageStream/bubbles/FileDocBubble.tsx

@@ -1,4 +1,5 @@
-import { ArrowDownToLine } from "lucide-react";
+import { ArrowDownToLine, LoaderCircle } from "lucide-react";
+import { useState } from "react";
 import { useI18n } from "../../../i18n";
 import type { Attachment, Post } from "../../../types/post";
 import { downloadAttachment } from "../utils/downloadFile";
@@ -11,12 +12,18 @@ import { formatBytes } from "../utils/formatBytes";
 import { postDisplayText } from "../utils/postText";
 
 function AttachmentRow({ postId, att }: { postId: string; att: Attachment }) {
+  const { t } = useI18n();
   const isImageAsDoc = att.mime.startsWith("image/");
   const { Icon, color } = fileIcon({ mime: att.mime, filename: att.filename });
   const displayFilename = filenameWithExtension(att.filename, att.mime);
+  const [isDownloading, setIsDownloading] = useState(false);
 
   const handleDownload = () => {
-    void downloadAttachment(postId, att.id, displayFilename).catch(() => {});
+    if (isDownloading) return;
+    setIsDownloading(true);
+    void downloadAttachment(postId, att.id, displayFilename)
+      .finally(() => setIsDownloading(false))
+      .catch(() => {});
   };
 
   return (
@@ -24,8 +31,12 @@ function AttachmentRow({ postId, att }: { postId: string; att: Attachment }) {
       <button
         type="button"
         onClick={handleDownload}
-        className="relative h-11 w-11 shrink-0 overflow-hidden rounded-full md:h-12 md:w-12"
-        aria-label={`Download ${att.filename}`}
+        disabled={isDownloading}
+        className="relative h-11 w-11 shrink-0 overflow-hidden rounded-full disabled:cursor-wait md:h-12 md:w-12"
+        aria-label={
+          isDownloading ? t("downloading") : `Download ${att.filename}`
+        }
+        aria-busy={isDownloading}
       >
         {isImageAsDoc && att.thumbnailUrl ? (
           <img
@@ -42,7 +53,11 @@ function AttachmentRow({ postId, att }: { postId: string; att: Attachment }) {
           </div>
         )}
         <div className="absolute inset-0 flex items-center justify-center bg-black/35 text-white opacity-100 transition group-hover:bg-black/45 group-focus-visible:bg-black/45">
-          <ArrowDownToLine className="h-4 w-4" strokeWidth={2.3} />
+          {isDownloading ? (
+            <LoaderCircle className="h-4 w-4 animate-spin" strokeWidth={2.3} />
+          ) : (
+            <ArrowDownToLine className="h-4 w-4" strokeWidth={2.3} />
+          )}
         </div>
       </button>
       <div className="min-w-0 flex-1">
@@ -53,7 +68,7 @@ function AttachmentRow({ postId, att }: { postId: string; att: Attachment }) {
           {middleEllipsisFilename(displayFilename)}
         </div>
         <div className="text-[11px] text-neutral-400">
-          {formatBytes(att.sizeBytes)}
+          {isDownloading ? t("downloading") : formatBytes(att.sizeBytes)}
         </div>
       </div>
     </div>