Animated Icon: Fix progressive

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()));
 

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}

src/components/common/AnimatedIconWithPreview.module.scss

@@ -1,5 +1,7 @@
 .root {
   position: relative;
+
+  display: block !important;
 }
 
 .preview {

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