From d2029a989fc4a3e69e0ba6263b16bcd1b856a848 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Tue, 1 Nov 2022 18:53:20 +0100
Subject: [PATCH] Sticker View: Fix confilicting lottie animations

---
 src/components/common/AnimatedSticker.tsx | 4 +---
 src/components/common/StickerView.tsx     | 6 ++++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/common/AnimatedSticker.tsx b/src/components/common/AnimatedSticker.tsx
index d666db089..62577bee7 100644
--- a/src/components/common/AnimatedSticker.tsx
+++ b/src/components/common/AnimatedSticker.tsx
@@ -102,12 +102,10 @@ const AnimatedSticker: FC<OwnProps> = ({
         return;
       }
 
-      const fullId = `${id || generateIdFor(ID_STORE, true)}_${size}${color ? `_${color.join(',')}` : ''}`;
-
       const newAnimation = RLottie.init(
         containerRef.current,
         onLoad,
-        fullId,
+        id || generateIdFor(ID_STORE, true),
         tgsUrl,
         {
           noLoop,
diff --git a/src/components/common/StickerView.tsx b/src/components/common/StickerView.tsx
index f462a6932..bca69295c 100644
--- a/src/components/common/StickerView.tsx
+++ b/src/components/common/StickerView.tsx
@@ -99,6 +99,8 @@ const StickerView: FC<OwnProps> = ({
   // Preload preview for Message Input and local message
   useMedia(previewMediaHash, !shouldLoad || !shouldPreloadPreview, undefined, cacheBuster);
 
+  const idKey = [id, size, customColor?.join(',')].filter(Boolean).join('_');
+
   return (
     <>
       <img
@@ -108,8 +110,8 @@ const StickerView: FC<OwnProps> = ({
       />
       {isLottie ? (
         <AnimatedSticker
-          key={customColor?.join(',')}
-          id={id}
+          key={idKey}
+          id={idKey}
           size={size}
           className={buildClassName(styles.media, fullMediaClassName, fullMediaClassNames)}
           tgsUrl={fullMediaData}