GithubProxy/ChatGPT-Next-Web
1
0
Fork 1
mirror of https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web.git synced 2025-05-20 04:30:17 +09:00
Code Issues Packages Projects Releases Wiki Activity

add loading icon when upload artifact content

Browse Source
This commit is contained in:
lloydzhou 2024-07-25 12:49:19 +08:00
parent ab9f5382b2
commit b4bf11d648
1 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/components/artifact.tsx
View File

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