From 56af8a0f36bad4aa66ad924fad244d0e8f757bac Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Sun, 13 Nov 2022 17:05:49 +0400
Subject: [PATCH] Message / Sticker: Fix missing preview when sending twice

---
 src/components/common/StickerView.module.scss |  4 ++++
 src/components/common/StickerView.tsx         | 10 +++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/common/StickerView.module.scss b/src/components/common/StickerView.module.scss
index daccab1bf..74f2d1b2c 100644
--- a/src/components/common/StickerView.module.scss
+++ b/src/components/common/StickerView.module.scss
@@ -7,6 +7,10 @@
   }
 }
 
+.noTransition {
+  transition: none !important;
+}
+
 .media {
   position: absolute;
   top: 0;
diff --git a/src/components/common/StickerView.tsx b/src/components/common/StickerView.tsx
index 6273fcd04..9f13ebb63 100644
--- a/src/components/common/StickerView.tsx
+++ b/src/components/common/StickerView.tsx
@@ -100,11 +100,13 @@ const StickerView: FC<OwnProps> = ({
   const shouldSkipFullMedia = Boolean(fullMediaHash === previewMediaHash && preloadedPreviewData);
 
   const fullMediaData = useMedia(fullMediaHash, !shouldLoad || shouldSkipFullMedia, undefined, cacheBuster);
-  const [isPlayerReady, markPlayerReady] = useFlag(Boolean(isLottie && fullMediaData));
+  // If Lottie data is loaded we will only render thumb if it's good enough (from preview)
+  const [isPlayerReady, markPlayerReady] = useFlag(Boolean(isLottie && fullMediaData && !preloadedPreviewData));
   const isFullMediaReady = fullMediaData && (isStatic || isPlayerReady);
 
   const thumbClassNames = useMediaTransition(thumbData && !isFullMediaReady);
   const fullMediaClassNames = useMediaTransition(isFullMediaReady);
+  const noTransition = isLottie && preloadedPreviewData;
 
   // Preload preview for Message Input and local message
   useMedia(previewMediaHash, !shouldLoad || !shouldPreloadPreview, undefined, cacheBuster);
@@ -118,7 +120,7 @@ const StickerView: FC<OwnProps> = ({
     <>
       <img
         src={thumbData}
-        className={buildClassName(styles.thumb, thumbClassName, thumbClassNames)}
+        className={buildClassName(styles.thumb, noTransition && styles.noTransition, thumbClassName, thumbClassNames)}
         alt=""
       />
       {isLottie ? (
@@ -126,7 +128,9 @@ const StickerView: FC<OwnProps> = ({
           key={idKey}
           id={idKey}
           size={size}
-          className={buildClassName(styles.media, fullMediaClassName, fullMediaClassNames)}
+          className={buildClassName(
+            styles.media, noTransition && styles.noTransition, fullMediaClassName, fullMediaClassNames,
+          )}
           tgsUrl={fullMediaData}
           play={shouldPlay}
           color={customColor}