From 4309330b2ccbbb9e5a559ff47484092adae374dc Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Tue, 27 Dec 2022 02:45:32 +0100
Subject: [PATCH] Animated Icon: Fix progressive

---
 src/components/common/AnimatedIcon.tsx        | 11 ++------
 .../common/AnimatedIconFromSticker.tsx        |  1 -
 .../AnimatedIconWithPreview.module.scss       |  2 ++
 .../common/AnimatedIconWithPreview.tsx        | 27 ++++++++++---------
 4 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/src/components/common/AnimatedIcon.tsx b/src/components/common/AnimatedIcon.tsx
index 2a25f3982..aebfe5952 100644
--- a/src/components/common/AnimatedIcon.tsx
+++ b/src/components/common/AnimatedIcon.tsx
@@ -16,8 +16,6 @@ export type OwnProps =
   Partial<AnimatedStickerProps>
   & { noTransition?: boolean; nonInteractive?: boolean };
 
-const loadedAnimationUrls = new Set();
-
 function AnimatedIcon(props: OwnProps) {
   const {
     size = DEFAULT_SIZE,
@@ -30,18 +28,13 @@ function AnimatedIcon(props: OwnProps) {
     onClick,
     ...otherProps
   } = props;
-  const { tgsUrl } = props;
-
-  const key = `${tgsUrl}_${size}`;
-  const [isAnimationLoaded, markAnimationLoaded] = useFlag(loadedAnimationUrls.has(key));
+  const [isAnimationLoaded, markAnimationLoaded] = useFlag(false);
   const transitionClassNames = useMediaTransition(noTransition || isAnimationLoaded);
 
   const handleLoad = useCallback(() => {
     markAnimationLoaded();
-    loadedAnimationUrls.add(key);
-
     onLoad?.();
-  }, [key, markAnimationLoaded, onLoad]);
+  }, [markAnimationLoaded, onLoad]);
 
   const [playKey, setPlayKey] = useState(String(Math.random()));
 
diff --git a/src/components/common/AnimatedIconFromSticker.tsx b/src/components/common/AnimatedIconFromSticker.tsx
index 2227a1eab..5de9da42e 100644
--- a/src/components/common/AnimatedIconFromSticker.tsx
+++ b/src/components/common/AnimatedIconFromSticker.tsx
@@ -33,7 +33,6 @@ 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.module.scss b/src/components/common/AnimatedIconWithPreview.module.scss
index e99002f2e..4f4919521 100644
--- a/src/components/common/AnimatedIconWithPreview.module.scss
+++ b/src/components/common/AnimatedIconWithPreview.module.scss
@@ -1,5 +1,7 @@
 .root {
   position: relative;
+
+  display: block !important;
 }
 
 .preview {
diff --git a/src/components/common/AnimatedIconWithPreview.tsx b/src/components/common/AnimatedIconWithPreview.tsx
index 1e2169b40..a06edfd6a 100644
--- a/src/components/common/AnimatedIconWithPreview.tsx
+++ b/src/components/common/AnimatedIconWithPreview.tsx
@@ -3,12 +3,13 @@ import React, { memo, useCallback } from '../../lib/teact/teact';
 import type { OwnProps as AnimatedIconProps } from './AnimatedIcon';
 
 import buildClassName from '../../util/buildClassName';
-
-import useMediaTransition from '../../hooks/useMediaTransition';
-import AnimatedIcon from './AnimatedIcon';
-import styles from './AnimatedIconWithPreview.module.scss';
-import useFlag from '../../hooks/useFlag';
 import buildStyle from '../../util/buildStyle';
+import useMediaTransition from '../../hooks/useMediaTransition';
+import useFlag from '../../hooks/useFlag';
+
+import AnimatedIcon from './AnimatedIcon';
+
+import styles from './AnimatedIconWithPreview.module.scss';
 
 type OwnProps =
   Partial<AnimatedIconProps>
@@ -18,11 +19,11 @@ const loadedPreviewUrls = new Set();
 
 function AnimatedIconWithPreview(props: OwnProps) {
   const {
-    previewUrl, thumbDataUri, noPreviewTransition, className, ...otherProps
+    previewUrl, thumbDataUri, className, ...otherProps
   } = props;
 
-  const [isPreviewLoaded, markPreviewLoaded] = useFlag(loadedPreviewUrls.has(previewUrl));
-  const previewClassNames = useMediaTransition(noPreviewTransition || isPreviewLoaded);
+  const [isPreviewLoaded, markPreviewLoaded] = useFlag(Boolean(thumbDataUri) || loadedPreviewUrls.has(previewUrl));
+  const transitionClassNames = useMediaTransition(isPreviewLoaded);
   const [isAnimationReady, markAnimationReady] = useFlag(false);
 
   const handlePreviewLoad = useCallback(() => {
@@ -34,18 +35,18 @@ function AnimatedIconWithPreview(props: OwnProps) {
 
   return (
     <div
-      className={buildClassName(className, styles.root)}
+      className={buildClassName(className, styles.root, transitionClassNames)}
       style={buildStyle(size !== undefined && `width: ${size}px; height: ${size}px;`)}
     >
-      {!isAnimationReady && thumbDataUri && (
+      {thumbDataUri && !isAnimationReady && (
         // eslint-disable-next-line jsx-a11y/alt-text
-        <img src={thumbDataUri} className={buildClassName(styles.preview)} />
+        <img src={thumbDataUri} className={styles.preview} />
       )}
-      {!isAnimationReady && previewUrl && (
+      {previewUrl && !isAnimationReady && (
         // eslint-disable-next-line jsx-a11y/alt-text
         <img
           src={previewUrl}
-          className={buildClassName(styles.preview, previewClassNames)}
+          className={styles.preview}
           onLoad={handlePreviewLoad}
         />
       )}