From b4bf11d648c4c9b9f390272b38b05e8fe193a24f Mon Sep 17 00:00:00 2001
From: lloydzhou <lloydzhou@qq.com>
Date: Thu, 25 Jul 2024 12:49:19 +0800
Subject: [PATCH] add loading icon when upload artifact content

---
 app/components/artifact.tsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/app/components/artifact.tsx b/app/components/artifact.tsx
index 24e62dfb1..b88802764 100644
--- a/app/components/artifact.tsx
+++ b/app/components/artifact.tsx
@@ -7,6 +7,7 @@ import ExportIcon from "../icons/share.svg";
 import CopyIcon from "../icons/copy.svg";
 import DownloadIcon from "../icons/download.svg";
 import GithubIcon from "../icons/github.svg";
+import LoadingButtonIcon from "../icons/loading.svg";
 import Locale from "../locales";
 import { Modal, showToast } from "./ui-lib";
 import { copyToClipboard, downloadAs } from "../utils";
@@ -83,6 +84,7 @@ export function ArtifactShareButton({
   style?: any;
   fileName?: string;
 }) {
+  const [loading, setLoading] = useState(false);
   const [name, setName] = useState(id);
   const [show, setShow] = useState(false);
   const shareUrl = useMemo(
@@ -110,16 +112,19 @@ export function ArtifactShareButton({
     <>
       <div className="window-action-button" style={style}>
         <IconButton
-          icon={<ExportIcon />}
+          icon={loading ? <LoadingButtonIcon /> : <ExportIcon />}
           bordered
           title={Locale.Export.Artifact.Title}
           onClick={() => {
-            upload(getCode()).then((res) => {
-              if (res?.id) {
-                setShow(true);
-                setName(res?.id);
-              }
-            });
+            setLoading(true);
+            upload(getCode())
+              .then((res) => {
+                if (res?.id) {
+                  setShow(true);
+                  setName(res?.id);
+                }
+              })
+              .finally(() => setLoading(false));
           }}
         />
       </div>