From e1ca21fc469fdf64980918c429d9e2613200a4d7 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Thu, 15 Sep 2022 10:17:59 +0200
Subject: [PATCH] Settings: Fix various flickers

---
 src/components/common/AnimatedIcon.tsx        |  2 +-
 .../common/AnimatedIconFromSticker.tsx        |  1 +
 .../common/AnimatedIconWithPreview.tsx        | 23 +++++++++++----
 .../left/settings/SettingsPrivacy.tsx         | 29 +++++++------------
 4 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/src/components/common/AnimatedIcon.tsx b/src/components/common/AnimatedIcon.tsx
index d9917834..2a25f398 100644
--- a/src/components/common/AnimatedIcon.tsx
+++ b/src/components/common/AnimatedIcon.tsx
@@ -55,7 +55,7 @@ function AnimatedIcon(props: OwnProps) {
 
   return (
     <AnimatedSticker
-      className={buildClassName(className, transitionClassNames, 'shown')}
+      className={buildClassName(className, transitionClassNames)}
       size={size}
       play={play === true ? playKey : play}
       noLoop={noLoop}
diff --git a/src/components/common/AnimatedIconFromSticker.tsx b/src/components/common/AnimatedIconFromSticker.tsx
index 5ef70025..c5a3a46a 100644
--- a/src/components/common/AnimatedIconFromSticker.tsx
+++ b/src/components/common/AnimatedIconFromSticker.tsx
@@ -31,6 +31,7 @@ function AnimatedIconFromSticker(props: OwnProps) {
     <AnimatedIconWithPreview
       tgsUrl={tgsUrl}
       previewUrl={previewBlobUrl}
+      noPreviewTransition
       thumbDataUri={thumbDataUri}
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...otherProps}
diff --git a/src/components/common/AnimatedIconWithPreview.tsx b/src/components/common/AnimatedIconWithPreview.tsx
index 2951965e..1eaa0651 100644
--- a/src/components/common/AnimatedIconWithPreview.tsx
+++ b/src/components/common/AnimatedIconWithPreview.tsx
@@ -1,4 +1,4 @@
-import React, { memo } from '../../lib/teact/teact';
+import React, { memo, useCallback } from '../../lib/teact/teact';
 
 import type { OwnProps as AnimatedIconProps } from './AnimatedIcon';
 
@@ -12,15 +12,24 @@ import buildStyle from '../../util/buildStyle';
 
 type OwnProps =
   Partial<AnimatedIconProps>
-  & { previewUrl?: string; thumbDataUri?: string };
+  & { previewUrl?: string; thumbDataUri?: string; noPreviewTransition?: boolean };
+
+const loadedPreviewUrls = new Set();
 
 function AnimatedIconWithPreview(props: OwnProps) {
   const {
-    previewUrl, thumbDataUri, className, ...otherProps
+    previewUrl, thumbDataUri, noPreviewTransition, className, ...otherProps
   } = props;
 
-  const transitionClassNames = useMediaTransition(previewUrl);
+  const [isPreviewLoaded, markPreviewLoaded] = useFlag(loadedPreviewUrls.has(previewUrl));
+  const previewClassNames = useMediaTransition(noPreviewTransition || isPreviewLoaded);
   const [isAnimationReady, markAnimationReady] = useFlag(false);
+
+  const handlePreviewLoad = useCallback(() => {
+    markPreviewLoaded();
+    loadedPreviewUrls.add(previewUrl);
+  }, [markPreviewLoaded, previewUrl]);
+
   const { size } = props;
 
   return (
@@ -34,7 +43,11 @@ function AnimatedIconWithPreview(props: OwnProps) {
       )}
       {!isAnimationReady && (
         // eslint-disable-next-line jsx-a11y/alt-text
-        <img src={previewUrl} className={buildClassName(styles.preview, transitionClassNames)} />
+        <img
+          src={previewUrl}
+          className={buildClassName(styles.preview, previewClassNames)}
+          onLoad={handlePreviewLoad}
+        />
       )}
       {/* eslint-disable-next-line react/jsx-props-no-spreading */}
       <AnimatedIcon {...otherProps} onLoad={markAnimationReady} noTransition />
diff --git a/src/components/left/settings/SettingsPrivacy.tsx b/src/components/left/settings/SettingsPrivacy.tsx
index 4c5d32eb..8f416d4b 100644
--- a/src/components/left/settings/SettingsPrivacy.tsx
+++ b/src/components/left/settings/SettingsPrivacy.tsx
@@ -137,29 +137,20 @@ const SettingsPrivacy: FC<OwnProps & StateProps> = ({
       <div className="settings-item pt-3">
         <ListItem
           icon="delete-user"
-          narrow
           // eslint-disable-next-line react/jsx-no-bind
           onClick={() => onScreenSelect(SettingsScreens.PrivacyBlockedUsers)}
         >
-          <div className="multiline-menu-item">
-            <span className="title">{lang('BlockedUsers')}</span>
-            {blockedCount > 0 && (
-              <span className="subtitle" dir="auto">
-                {lang('Users', blockedCount)}
-              </span>
-            )}
-          </div>
+          {lang('BlockedUsers')}
+          <span className="settings-item__current-value">{blockedCount || ''}</span>
+        </ListItem>
+        <ListItem
+          icon="web"
+          // eslint-disable-next-line react/jsx-no-bind
+          onClick={() => onScreenSelect(SettingsScreens.ActiveWebsites)}
+        >
+          {lang('PrivacySettings.WebSessions')}
+          <span className="settings-item__current-value">{webAuthCount || ''}</span>
         </ListItem>
-        {webAuthCount > 0 && (
-          <ListItem
-            icon="web"
-            // eslint-disable-next-line react/jsx-no-bind
-            onClick={() => onScreenSelect(SettingsScreens.ActiveWebsites)}
-          >
-            {lang('PrivacySettings.WebSessions')}
-            <span className="settings-item__current-value">{webAuthCount}</span>
-          </ListItem>
-        )}
         <ListItem
           icon="key"
           narrow