From 4099d6392ea3fac68ecb494aa5b885b84d7c1dc7 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Sat, 19 Jun 2021 15:05:21 +0300
Subject: [PATCH] Animated Emoji: Smooth preloading

---
 src/components/common/AnimatedEmoji.scss         |  5 +++++
 src/components/common/AnimatedEmoji.tsx          | 13 ++++++++-----
 src/components/common/helpers/mediaDimensions.ts |  2 +-
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/common/AnimatedEmoji.scss b/src/components/common/AnimatedEmoji.scss
index 40bbecf6c..dbc1d8056 100644
--- a/src/components/common/AnimatedEmoji.scss
+++ b/src/components/common/AnimatedEmoji.scss
@@ -2,7 +2,12 @@
   margin-bottom: 0.75rem;
 
   img {
+    position: absolute;
     width: 100%;
     height: 100%;
+
+    &.like-sticker-thumb {
+      transform: scale(0.8);
+    }
   }
 }
diff --git a/src/components/common/AnimatedEmoji.tsx b/src/components/common/AnimatedEmoji.tsx
index 7e3d33d77..e96820700 100644
--- a/src/components/common/AnimatedEmoji.tsx
+++ b/src/components/common/AnimatedEmoji.tsx
@@ -5,7 +5,7 @@ import React, {
 import { ApiMediaFormat, ApiSticker } from '../../api/types';
 
 import { STICKER_SIZE_TWO_FA } from '../../config';
-import { getStickerDimensions } from './helpers/mediaDimensions';
+import { getStickerDimensions, LIKE_STICKER_ID } from './helpers/mediaDimensions';
 import { ObserveFn, useIsIntersecting } from '../../hooks/useIntersectionObserver';
 import useMedia from '../../hooks/useMedia';
 import useTransitionForMedia from '../../hooks/useTransitionForMedia';
@@ -37,14 +37,14 @@ const AnimatedEmoji: FC<OwnProps> = ({
 
   const isIntersecting = useIsIntersecting(ref, observeIntersection);
 
+  const thumbDataUri = sticker.thumbnail && sticker.thumbnail.dataUri;
   const previewBlobUrl = useMedia(
     `${localMediaHash}?size=m`,
     !isIntersecting && !forceLoadPreview,
     ApiMediaFormat.BlobUrl,
     lastSyncTime,
   );
-  const previewData = previewBlobUrl || (sticker.thumbnail && sticker.thumbnail.dataUri);
-  const { transitionClassNames } = useTransitionForMedia(previewData, 'slow');
+  const { transitionClassNames } = useTransitionForMedia(previewBlobUrl, 'slow');
 
   const mediaData = useMedia(localMediaHash, !isIntersecting, ApiMediaFormat.Lottie, lastSyncTime);
   const isMediaLoaded = Boolean(mediaData);
@@ -71,8 +71,11 @@ const AnimatedEmoji: FC<OwnProps> = ({
       style={style}
       onClick={handleClick}
     >
-      {previewData && !isAnimationLoaded && (
-        <img src={previewData} className={transitionClassNames} alt="" />
+      {!isAnimationLoaded && thumbDataUri && (
+        <img src={thumbDataUri} className={sticker.id === LIKE_STICKER_ID ? 'like-sticker-thumb' : undefined} alt="" />
+      )}
+      {!isAnimationLoaded && previewBlobUrl && (
+        <img src={previewBlobUrl} className={transitionClassNames} alt="" />
       )}
       {isMediaLoaded && (
         <AnimatedSticker
diff --git a/src/components/common/helpers/mediaDimensions.ts b/src/components/common/helpers/mediaDimensions.ts
index 148bd690c..8036c5891 100644
--- a/src/components/common/helpers/mediaDimensions.ts
+++ b/src/components/common/helpers/mediaDimensions.ts
@@ -10,7 +10,7 @@ export const ROUND_VIDEO_DIMENSIONS = 200;
 export const AVATAR_FULL_DIMENSIONS = { width: 640, height: 640 };
 
 const DEFAULT_MEDIA_DIMENSIONS: IDimensions = { width: 100, height: 100 };
-const LIKE_STICKER_ID = '1258816259753933';
+export const LIKE_STICKER_ID = '1258816259753933';
 const MOBILE_SCREEN_MAX_MESSAGE_SCREEN_WIDTH = 0.69;
 
 let cachedMaxWidth: number | undefined;