diff --git a/apps/web/src/components/toggle/index.js b/apps/web/src/components/toggle/index.js index 751a7d647..eac25ccea 100644 --- a/apps/web/src/components/toggle/index.js +++ b/apps/web/src/components/toggle/index.js @@ -17,12 +17,13 @@ You should have received a copy of the GNU General Public License along with this program. If not, see . */ -import { useCallback } from "react"; +import { useCallback, useState } from "react"; import { showBuyDialog } from "../../common/dialog-controller"; import Tip from "../tip"; import { isUserPremium } from "../../hooks/use-is-user-premium"; import { Flex } from "@theme-ui/components"; import Switch from "../switch"; +import { Loading } from "../icons"; function Toggle(props) { const { @@ -36,9 +37,16 @@ function Toggle(props) { testId, disabled } = props; + const [isLoading, setIsLoading] = useState(false); const onClick = useCallback(async () => { - if (isUserPremium() || !premium || isToggled) onToggled(); - else { + if (isUserPremium() || !premium || isToggled) { + setIsLoading(true); + try { + await onToggled(); + } finally { + setIsLoading(false); + } + } else { await showBuyDialog(); } }, [onToggled, premium, isToggled]); @@ -60,7 +68,11 @@ function Toggle(props) { }} > - + {isLoading ? ( + + ) : ( + + )} ); } diff --git a/apps/web/src/views/settings.js b/apps/web/src/views/settings.js index c768783c8..52c0f68ad 100644 --- a/apps/web/src/views/settings.js +++ b/apps/web/src/views/settings.js @@ -1103,6 +1103,18 @@ function Settings() { } /> + { + await db.user.changeMarketingConsent(!user.marketingConsent); + await refreshUser(); + }} + isToggled={user.marketingConsent} + />