Sticker View: Fix confilicting lottie animations

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,

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}