diff --git a/src/components/profile/profile-box.tsx b/src/components/profile/profile-box.tsx index a0fc4a1..6e15a87 100644 --- a/src/components/profile/profile-box.tsx +++ b/src/components/profile/profile-box.tsx @@ -27,6 +27,7 @@ export const ProfileBox = styled(Box)( }[key]!; return { + position: "relative", width: "100%", display: "block", cursor: "pointer", diff --git a/src/components/profile/profile-item.tsx b/src/components/profile/profile-item.tsx index b370307..72fda6f 100644 --- a/src/components/profile/profile-item.tsx +++ b/src/components/profile/profile-item.tsx @@ -12,6 +12,7 @@ import { keyframes, MenuItem, Menu, + CircularProgress, } from "@mui/material"; import { RefreshRounded } from "@mui/icons-material"; import { atomLoadingCache } from "@/services/states"; @@ -28,13 +29,14 @@ const round = keyframes` interface Props { selected: boolean; + activating: boolean; itemData: IProfileItem; onSelect: (force: boolean) => void; onEdit: () => void; } export const ProfileItem = (props: Props) => { - const { selected, itemData, onSelect, onEdit } = props; + const { selected, activating, itemData, onSelect, onEdit } = props; const { t } = useTranslation(); const [anchorEl, setAnchorEl] = useState(null); @@ -192,6 +194,25 @@ export const ProfileItem = (props: Props) => { event.preventDefault(); }} > + {activating && ( + + + + )} + { const [url, setUrl] = useState(""); const [disabled, setDisabled] = useState(false); + const [activating, setActivating] = useState(""); const { profiles = {}, @@ -99,6 +100,8 @@ const ProfilePage = () => { const onSelect = useLockFn(async (current: string, force: boolean) => { if (!force && current === profiles.current) return; + // 避免大多数情况下loading态闪烁 + const reset = setTimeout(() => setActivating(current), 100); try { await patchProfiles({ current }); mutateLogs(); @@ -107,6 +110,9 @@ const ProfilePage = () => { Notice.success("Refresh clash config", 1000); } catch (err: any) { Notice.error(err?.message || err.toString(), 4000); + } finally { + clearTimeout(reset); + setActivating(""); } }); @@ -258,6 +264,7 @@ const ProfilePage = () => { onSelect(item.uid, f)} onEdit={() => viewerRef.current?.edit(item)}