Profile / Notifications: Better animation and optimistic behavior (#2153)

src/components/common/ChatExtra.tsx

@@ -1,5 +1,7 @@
 import type { FC } from '../../lib/teact/teact';
-import React, { memo, useCallback, useEffect } from '../../lib/teact/teact';
+import React, {
+  memo, useCallback, useEffect, useState,
+} from '../../lib/teact/teact';
 import { getActions, withGlobal } from '../../global';
 
 import type { GlobalState } from '../../global/types';
@@ -14,6 +16,7 @@ import {
 import renderText from './helpers/renderText';
 import { copyTextToClipboard } from '../../util/clipboard';
 import { formatPhoneNumberWithCode } from '../../util/phoneNumber';
+import { debounce } from '../../util/schedulers';
 import useLang from '../../hooks/useLang';
 
 import ListItem from '../ui/ListItem';
@@ -34,6 +37,8 @@ type StateProps =
   }
   & Pick<GlobalState, 'lastSyncTime'>;
 
+const runDebounced = debounce((cb) => cb(), 500, false);
+
 const ChatExtra: FC<OwnProps & StateProps> = ({
   lastSyncTime,
   user,
@@ -59,6 +64,7 @@ const ChatExtra: FC<OwnProps & StateProps> = ({
   const { id: chatId } = chat || {};
   const lang = useLang();
 
+  const [areNotificationsEnabled, setAreNotificationsEnabled] = useState(!isMuted);
   useEffect(() => {
     if (lastSyncTime && userId) {
       loadFullUser({ userId });
@@ -66,8 +72,16 @@ const ChatExtra: FC<OwnProps & StateProps> = ({
   }, [loadFullUser, userId, lastSyncTime]);
 
   const handleNotificationChange = useCallback(() => {
-    updateChatMutedState({ chatId, isMuted: !isMuted });
-  }, [chatId, isMuted, updateChatMutedState]);
+    setAreNotificationsEnabled((current) => {
+      const newAreNotificationsEnabled = !current;
+
+      runDebounced(() => {
+        updateChatMutedState({ chatId, isMuted: !newAreNotificationsEnabled });
+      });
+
+      return newAreNotificationsEnabled;
+    });
+  }, [chatId, updateChatMutedState]);
 
   if (!chat || chat.isRestricted || (isSelf && !forceShowSelf)) {
     return undefined;
@@ -136,7 +150,7 @@ const ChatExtra: FC<OwnProps & StateProps> = ({
           <Switcher
             id="group-notifications"
             label={userId ? 'Toggle User Notifications' : 'Toggle Chat Notifications'}
-            checked={!isMuted}
+            checked={areNotificationsEnabled}
             inactive
           />
         </ListItem>

src/components/ui/Switcher.scss

@@ -43,7 +43,7 @@
     display: inline-block;
     border-radius: 0.5rem;
     position: relative;
-    transition: background-color 0.2s ease-in;
+    transition: background-color 150ms;
   }
 
   .widget:after {
@@ -55,8 +55,7 @@
     height: 1.125rem;
     background-color: var(--color-background);
     border-radius: 0.75rem;
-    /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
-    transition: border-color 0.2s ease-out;
+    transition: transform 200ms;
     border: 0.125rem solid var(--color-gray);
   }
 
@@ -65,12 +64,7 @@
   }
 
   input:checked + .widget:after {
-    left: calc(100% - 1.125rem);
-    transform: translateX(calc(-100% + 1.125rem));
+    transform: translateX(100%);
     border-color: var(--color-primary);
   }
-
-  .widget:active:after {
-    width: 1.25rem;
-  }
 }