Show attachment download progress

src/components/messageStream/bubbles/VideoBubble.tsx

@@ -1,4 +1,4 @@
-import { ArrowDownToLine, Play } from "lucide-react";
+import { ArrowDownToLine, LoaderCircle, Play } from "lucide-react";
 import { useRef, useState } from "react";
 import { useI18n } from "../../../i18n";
 import type { Post } from "../../../types/post";
@@ -17,9 +17,10 @@ function formatDuration(sec: number | undefined): string {
 
 export function VideoBubble({ post }: { post: Post }) {
   const { openVideo } = useVideoPlayer();
-  const { lang } = useI18n();
+  const { lang, t } = useI18n();
   const att = post.attachments[0];
   const [playing, setPlaying] = useState(false);
+  const [isDownloading, setIsDownloading] = useState(false);
   const videoRef = useRef<HTMLVideoElement>(null);
   const text = postDisplayText(post, lang);
   if (!att) return null;
@@ -73,24 +74,43 @@ export function VideoBubble({ post }: { post: Post }) {
               type="button"
               onClick={(e) => {
                 e.stopPropagation();
-                void downloadAttachment(post.id, att.id, att.filename).catch(
-                  () => {},
-                );
+                if (isDownloading) return;
+                setIsDownloading(true);
+                void downloadAttachment(post.id, att.id, att.filename)
+                  .finally(() => setIsDownloading(false))
+                  .catch(() => {});
               }}
-              className="group absolute left-3 top-3 z-10 inline-flex overflow-hidden rounded-full bg-black/45 text-xs text-white shadow-lg ring-1 ring-white/15 backdrop-blur-md transition hover:bg-black/60"
-              aria-label={`Download ${att.filename}`}
+              disabled={isDownloading}
+              className="group absolute left-3 top-3 z-10 inline-flex overflow-hidden rounded-full bg-black/45 text-xs text-white shadow-lg ring-1 ring-white/15 backdrop-blur-md transition hover:bg-black/60 disabled:cursor-wait"
+              aria-label={
+                isDownloading ? t("downloading") : `Download ${att.filename}`
+              }
+              aria-busy={isDownloading}
             >
               <span className="flex h-8 w-8 items-center justify-center bg-white/10 transition group-hover:bg-white/15">
-                <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} />
+                )}
               </span>
               <span className="flex h-8 items-center gap-1 px-2.5">
-                {duration ? (
+                {isDownloading ? (
+                  <span>{t("downloading")}</span>
+                ) : (
                   <>
-                    <span>{duration}</span>
-                    <span className="opacity-60">·</span>
+                    {duration ? (
+                      <>
+                        <span>{duration}</span>
+                        <span className="opacity-60">·</span>
+                      </>
+                    ) : null}
+                    <span>{formatBytes(att.sizeBytes)}</span>
                   </>
-                ) : null}
-                <span>{formatBytes(att.sizeBytes)}</span>
+                )}
               </span>
             </button>
             <button