Settings: Fix various flickers

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}

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}

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

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>
-        {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>
+          <span className="settings-item__current-value">{webAuthCount || ''}</span>
         </ListItem>
-        )}
         <ListItem
           icon="key"
           narrow