diff --git a/apps/web/src/dialogs/settings/index.tsx b/apps/web/src/dialogs/settings/index.tsx index 322346e65..c3d62e6ff 100644 --- a/apps/web/src/dialogs/settings/index.tsx +++ b/apps/web/src/dialogs/settings/index.tsx @@ -379,7 +379,7 @@ function SettingsGroupComponent(props: { item: SettingsGroup }) { function SettingItem(props: { item: Setting }) { const { item } = props; const [state, setState] = useState(); - const [isWorking, setIsWorking] = useState(false); + const [workIndex, setWorkIndex] = useState(); const isUserPremium = useIsUserPremium(); useEffect(() => { @@ -388,16 +388,16 @@ function SettingItem(props: { item: Setting }) { }, [item]); const workWithLoading = useCallback( - async (action) => { - if (isWorking) return; + async (index: number, action: () => Promise | void) => { + if (workIndex) return; try { - setIsWorking(true); + setWorkIndex(index); await action(); } finally { - setIsWorking(false); + setWorkIndex(undefined); } }, - [isWorking] + [workIndex] ); if (item.isHidden && item.isHidden(state)) return null; @@ -447,17 +447,17 @@ function SettingItem(props: { item: Setting }) { "& > label": { width: "auto" } }} > - {components.map((component) => { + {components.map((component, index) => { switch (component.type) { case "button": return (