Animated Icon: Fix progressive loading animation

src/components/common/AnimatedIconWithPreview.module.scss

@@ -2,6 +2,10 @@
   position: relative;
 
   display: block !important;
+
+  :global(.AnimatedSticker.not-shown) {
+    display: block;
+  }
 }
 
 .preview {
@@ -10,4 +14,8 @@
   top: 0;
   width: 100%;
   height: 100%;
+
+  &:global(.closing) {
+    transition-delay: 150ms;
+  }
 }

src/components/common/AnimatedIconWithPreview.tsx

@@ -1,6 +1,7 @@
 import React, { memo } from '../../lib/teact/teact';
 
 import type { OwnProps as AnimatedIconProps } from './AnimatedIcon';
+import AnimatedIcon from './AnimatedIcon';
 
 import buildClassName from '../../util/buildClassName';
 import buildStyle from '../../util/buildStyle';
@@ -9,14 +10,14 @@ import useLastCallback from '../../hooks/useLastCallback';
 import useMediaTransition from '../../hooks/useMediaTransition';
 import useFlag from '../../hooks/useFlag';
 
-import AnimatedIcon from './AnimatedIcon';
-
 import styles from './AnimatedIconWithPreview.module.scss';
 
 type OwnProps =
   Partial<AnimatedIconProps>
   & { previewUrl?: string; thumbDataUri?: string; noPreviewTransition?: boolean };
 
+const ANIMATION_DURATION = 300;
+
 const loadedPreviewUrls = new Set();
 
 function AnimatedIconWithPreview(props: OwnProps) {
@@ -24,36 +25,46 @@ function AnimatedIconWithPreview(props: OwnProps) {
     previewUrl, thumbDataUri, className, ...otherProps
   } = props;
 
-  const [isPreviewLoaded, markPreviewLoaded] = useFlag(Boolean(thumbDataUri) || loadedPreviewUrls.has(previewUrl));
+  const [isThumbOpen, , unmarkThumbOpen] = useFlag(Boolean(thumbDataUri));
-  const transitionClassNames = useMediaTransition(isPreviewLoaded);
+  const thumbClassNames = useMediaTransition(isThumbOpen);
+
+  const [isPreviewOpen, markPreviewOpen, unmarkPreviewOpen] = useFlag(loadedPreviewUrls.has(previewUrl));
+  const previewClassNames = useMediaTransition(isPreviewOpen);
+
   const [isAnimationReady, markAnimationReady] = useFlag(false);
 
   const handlePreviewLoad = useLastCallback(() => {
-    markPreviewLoaded();
+    markPreviewOpen();
     loadedPreviewUrls.add(previewUrl);
   });
 
+  const handleAnimationReady = useLastCallback(() => {
+    unmarkThumbOpen();
+    unmarkPreviewOpen();
+    setTimeout(markAnimationReady, ANIMATION_DURATION);
+  });
+
   const { size } = props;
 
   return (
     <div
-      className={buildClassName(className, styles.root, transitionClassNames)}
+      className={buildClassName(className, styles.root)}
       style={buildStyle(size !== undefined && `width: ${size}px; height: ${size}px;`)}
     >
       {thumbDataUri && !isAnimationReady && (
         // eslint-disable-next-line jsx-a11y/alt-text
-        <img src={thumbDataUri} className={styles.preview} />
+        <img src={thumbDataUri} className={buildClassName(styles.preview, thumbClassNames)} />
       )}
       {previewUrl && !isAnimationReady && (
         // eslint-disable-next-line jsx-a11y/alt-text
         <img
           src={previewUrl}
-          className={styles.preview}
+          className={buildClassName(styles.preview, previewClassNames)}
           onLoad={handlePreviewLoad}
         />
       )}
       {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-      <AnimatedIcon {...otherProps} onLoad={markAnimationReady} noTransition />
+      <AnimatedIcon {...otherProps} onLoad={handleAnimationReady} />
     </div>
   );
 }