fix(mcp): eliminate panel flicker on toggle with optimistic updates
- Add fixed height (h-16) to MCP list items for visual consistency - Implement optimistic UI updates in handleToggle to prevent flicker - Remove reload() call that caused loading state transitions - Add automatic rollback on API failure with error notifications
This commit is contained in:
@@ -47,8 +47,8 @@ const McpListItem: React.FC<McpListItemProps> = ({
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={cn(cardStyles.interactive, "!p-4")}>
|
<div className={cn(cardStyles.interactive, "!p-4 h-16")}>
|
||||||
<div className="flex items-center gap-4">
|
<div className="flex items-center gap-4 h-full">
|
||||||
{/* 左侧:Toggle 开关 */}
|
{/* 左侧:Toggle 开关 */}
|
||||||
<div className="flex-shrink-0">
|
<div className="flex-shrink-0">
|
||||||
<McpToggle
|
<McpToggle
|
||||||
|
|||||||
@@ -67,17 +67,27 @@ const McpPanel: React.FC<McpPanelProps> = ({ onClose, onNotify, appType }) => {
|
|||||||
}, [appType]);
|
}, [appType]);
|
||||||
|
|
||||||
const handleToggle = async (id: string, enabled: boolean) => {
|
const handleToggle = async (id: string, enabled: boolean) => {
|
||||||
try {
|
// 乐观更新:立即更新 UI
|
||||||
// 启用/禁用已存在的条目
|
const previousServers = servers;
|
||||||
|
setServers((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[id]: {
|
||||||
|
...prev[id],
|
||||||
|
enabled,
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 后台调用 API
|
||||||
await window.api.setMcpEnabled(appType, id, enabled);
|
await window.api.setMcpEnabled(appType, id, enabled);
|
||||||
await reload();
|
|
||||||
onNotify?.(
|
onNotify?.(
|
||||||
enabled ? t("mcp.msg.enabled") : t("mcp.msg.disabled"),
|
enabled ? t("mcp.msg.enabled") : t("mcp.msg.disabled"),
|
||||||
"success",
|
"success",
|
||||||
1500,
|
1500,
|
||||||
);
|
);
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
|
// 失败时回滚
|
||||||
|
setServers(previousServers);
|
||||||
const detail = extractErrorMessage(e);
|
const detail = extractErrorMessage(e);
|
||||||
onNotify?.(
|
onNotify?.(
|
||||||
detail || t("mcp.error.saveFailed"),
|
detail || t("mcp.error.saveFailed"),
|
||||||
|
|||||||
Reference in New Issue
Block a user