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}
+ />