feat: profiles: import btn with loading state

This commit is contained in:
keiko233 2023-10-21 16:50:46 +08:00
parent 2c2c174874
commit ee79bcfc44

View File

@ -3,6 +3,7 @@ import { useMemo, useRef, useState } from "react";
import { useLockFn } from "ahooks"; import { useLockFn } from "ahooks";
import { useSetRecoilState } from "recoil"; import { useSetRecoilState } from "recoil";
import { Box, Button, Grid, IconButton, Stack, TextField } from "@mui/material"; import { Box, Button, Grid, IconButton, Stack, TextField } from "@mui/material";
import { LoadingButton } from "@mui/lab";
import { import {
ClearRounded, ClearRounded,
ContentCopyRounded, ContentCopyRounded,
@ -38,6 +39,7 @@ const ProfilePage = () => {
const [url, setUrl] = useState(""); const [url, setUrl] = useState("");
const [disabled, setDisabled] = useState(false); const [disabled, setDisabled] = useState(false);
const [activating, setActivating] = useState(""); const [activating, setActivating] = useState("");
const [loading, setLoading] = useState(false);
const { const {
profiles = {}, profiles = {},
@ -76,12 +78,13 @@ const ProfilePage = () => {
const onImport = async () => { const onImport = async () => {
if (!url) return; if (!url) return;
setUrl(""); setLoading(true);
setDisabled(true);
try { try {
await importProfile(url); await importProfile(url);
Notice.success("Successfully import profile."); Notice.success("Successfully import profile.");
setUrl("");
setLoading(false);
getProfiles().then((newProfiles) => { getProfiles().then((newProfiles) => {
mutate("getProfiles", newProfiles); mutate("getProfiles", newProfiles);
@ -96,8 +99,10 @@ const ProfilePage = () => {
}); });
} catch (err: any) { } catch (err: any) {
Notice.error(err.message || err.toString()); Notice.error(err.message || err.toString());
setLoading(false);
} finally { } finally {
setDisabled(false); setDisabled(false);
setLoading(false);
} }
}; };
@ -271,14 +276,15 @@ const ProfilePage = () => {
), ),
}} }}
/> />
<Button <LoadingButton
disabled={!url || disabled} disabled={!url || disabled}
loading={loading}
variant="contained" variant="contained"
size="small" size="small"
onClick={onImport} onClick={onImport}
> >
{t("Import")} {t("Import")}
</Button> </LoadingButton>
<Button <Button
variant="contained" variant="contained"
size="small" size="small"