Show attachment download progress

src/components/RecommendedCard.tsx

@@ -1,9 +1,9 @@
-import { Download } from "lucide-react";
+import { Download, LoaderCircle } from "lucide-react";
 import { Link } from "react-router-dom";
 import type { Resource } from "../api";
 import { assetUrl, postJSON } from "../api";
 import { useI18n } from "../i18n";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { formatDateYmd } from "../utils/format";
 import { officialRecommendationCoverFallbacks } from "./FigmaBanner";
 import {
@@ -31,6 +31,7 @@ export function RecommendedCard({
   visualIndex?: number;
 }) {
   const { t } = useI18n();
+  const [isDownloading, setIsDownloading] = useState(false);
   const cover = useMemo(() => {
     const original = r.coverImage || r.previewUrl;
     if (isPlaceholderAsset(original)) {
@@ -85,29 +86,46 @@ export function RecommendedCard({
           {dl ? (
             <button
               type="button"
-              className="shrink-0 rounded-lg p-1 text-ark-gold outline-none hover:bg-ark-gold/10 focus-visible:ring-2 focus-visible:ring-ark-gold/80"
+              className="shrink-0 rounded-lg p-1 text-ark-gold outline-none hover:bg-ark-gold/10 focus-visible:ring-2 focus-visible:ring-ark-gold/80 disabled:cursor-wait"
-              title={t("download")}
+              title={isDownloading ? t("downloading") : t("download")}
-              aria-label={t("download")}
+              aria-label={isDownloading ? t("downloading") : t("download")}
+              aria-busy={isDownloading}
+              disabled={isDownloading}
               onClick={async (e) => {
                 e.preventDefault();
                 e.stopPropagation();
-                if (r.downloadPostId && r.downloadAttachmentId) {
+                if (isDownloading) return;
-                  void downloadAttachment(
+                setIsDownloading(true);
-                    r.downloadPostId,
-                    r.downloadAttachmentId,
-                    r.title,
-                  ).catch(() => {});
-                  return;
-                }
                 try {
-                  await postJSON(`/api/resources/${r.id}/download`, {});
+                  if (r.downloadPostId && r.downloadAttachmentId) {
+                    await downloadAttachment(
+                      r.downloadPostId,
+                      r.downloadAttachmentId,
+                      r.title,
+                    );
+                    return;
+                  }
+                  try {
+                    await postJSON(`/api/resources/${r.id}/download`, {});
+                  } catch {
+                    /* ignore */
+                  }
+                  await downloadFile(dl, r.title);
                 } catch {
                   /* ignore */
+                } finally {
+                  setIsDownloading(false);
                 }
-                void downloadFile(dl, r.title).catch(() => {});
               }}
             >
-              <Download className="h-5 w-5" strokeWidth={2.2} />
+              {isDownloading ? (
+                <LoaderCircle
+                  className="h-5 w-5 animate-spin"
+                  strokeWidth={2.2}
+                />
+              ) : (
+                <Download className="h-5 w-5" strokeWidth={2.2} />
+              )}
             </button>
           ) : null}
         </div>

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"
+        disabled={isDownloading}
-        aria-label={`Download ${att.filename}`}
+        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>

src/components/messageStream/bubbles/ImageWithTextBubble.tsx

@@ -1,12 +1,17 @@
+import { ArrowDownToLine, LoaderCircle } from "lucide-react";
+import { useState } from "react";
 import { useI18n } from "../../../i18n";
 import type { Post } from "../../../types/post";
 import { useLightbox } from "../overlays/ImageLightbox";
 import { autolink } from "../utils/autolink";
+import { downloadAttachment } from "../utils/downloadFile";
+import { formatBytes } from "../utils/formatBytes";
 import { postDisplayText } from "../utils/postText";
 
 export function ImageWithTextBubble({ post }: { post: Post }) {
   const { openLightbox } = useLightbox();
-  const { lang } = useI18n();
+  const { lang, t } = useI18n();
+  const [isDownloading, setIsDownloading] = useState(false);
   const att = post.attachments[0];
   const text = postDisplayText(post, lang);
   if (!att) return null;
@@ -29,6 +34,34 @@ export function ImageWithTextBubble({ post }: { post: Post }) {
           style={{ aspectRatio: ratio }}
         />
       </button>
+      <button
+        type="button"
+        onClick={(e) => {
+          e.stopPropagation();
+          if (isDownloading) return;
+          setIsDownloading(true);
+          void downloadAttachment(post.id, att.id, att.filename)
+            .finally(() => setIsDownloading(false))
+            .catch(() => {});
+        }}
+        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">
+          {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">
+          {isDownloading ? t("downloading") : formatBytes(att.sizeBytes)}
+        </span>
+      </button>
       {text ? (
         <div className="bg-gradient-to-b from-ark-panel/90 to-ark-panel px-4 py-3 text-[14px] leading-snug text-neutral-100">
           <div className="message-stream-copyable-text select-text whitespace-pre-wrap break-words">

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"
+              disabled={isDownloading}
-              aria-label={`Download ${att.filename}`}
+              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>
+                    {duration ? (
-                    <span className="opacity-60">·</span>
+                      <>
+                        <span>{duration}</span>
+                        <span className="opacity-60">·</span>
+                      </>
+                    ) : null}
+                    <span>{formatBytes(att.sizeBytes)}</span>
                   </>
-                ) : null}
+                )}
-                <span>{formatBytes(att.sizeBytes)}</span>
               </span>
             </button>
             <button

src/components/messageStream/overlays/ImageLightbox.tsx

@@ -8,10 +8,9 @@ import {
   type PropsWithChildren,
 } from "react";
 import { createPortal } from "react-dom";
-import { ChevronLeft, ChevronRight, Download, X } from "lucide-react";
+import { ChevronLeft, ChevronRight, X } from "lucide-react";
 import type { Attachment } from "../../../types/post";
 import { autolink } from "../utils/autolink";
-import { downloadAttachment, downloadFile } from "../utils/downloadFile";
 
 type LightboxState = {
   images: Attachment[];
@@ -66,7 +65,6 @@ export function ImageLightboxProvider({ children }: PropsWithChildren) {
           images={state.images}
           startIndex={state.index}
           caption={state.caption}
-          postId={state.postId}
           onClose={closeLightbox}
         />
       ) : null}
@@ -78,13 +76,11 @@ function LightboxView({
   images,
   startIndex,
   caption: captionText,
-  postId,
   onClose,
 }: {
   images: Attachment[];
   startIndex: number;
   caption?: string;
-  postId?: string;
   onClose: () => void;
 }) {
   const [index, setIndex] = useState(startIndex);
@@ -137,24 +133,6 @@ function LightboxView({
         <X className="h-5 w-5" />
       </button>
 
-      <button
-        type="button"
-        onClick={(e) => {
-          e.stopPropagation();
-          if (postId) {
-            void downloadAttachment(postId, current.id, current.filename).catch(
-              () => {},
-            );
-          } else {
-            void downloadFile(current.url, current.filename).catch(() => {});
-          }
-        }}
-        className="absolute right-16 top-4 z-10 flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-white transition hover:bg-white/20"
-        aria-label="Download"
-      >
-        <Download className="h-5 w-5" />
-      </button>
-
       {images.length > 1 ? (
         <>
           <button

src/i18n.tsx

@@ -32,6 +32,7 @@ const zhDict: Dict = {
   popularSection: "热门资料",
   preview: "预览",
   download: "下载",
+  downloading: "下载中…",
   share: "分享",
   langLabel: "语言",
   admin: "后台",
@@ -141,6 +142,7 @@ const enDict: Dict = {
   popularSection: "Popular assets",
   preview: "Preview",
   download: "Download",
+  downloading: "Downloading…",
   share: "Share",
   langLabel: "Language",
   admin: "Admin",