From 4de260c89d5048f4cb75cbf902883cabb245770c Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Tue, 10 Jan 2023 02:07:42 +0100
Subject: [PATCH] Animated Sticker, Sticker View: Fix initializing in hidden
 containers

---
 src/components/common/AnimatedSticker.tsx | 7 +++++++
 src/hooks/useBoundsInSharedCanvas.ts      | 8 ++++++++
 src/lib/rlottie/RLottie.ts                | 2 +-
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/common/AnimatedSticker.tsx b/src/components/common/AnimatedSticker.tsx
index 8146d2b90..8f319e7b6 100644
--- a/src/components/common/AnimatedSticker.tsx
+++ b/src/components/common/AnimatedSticker.tsx
@@ -45,6 +45,7 @@ let RLottie: RLottieClass;
 // Time for the main interface to completely load
 const LOTTIE_LOAD_DELAY = 3000;
 const ID_STORE = {};
+const ANIMATION_END_TIMEOUT = 500;
 
 async function ensureLottie() {
   if (!lottiePromise) {
@@ -119,6 +120,12 @@ const AnimatedSticker: FC<OwnProps> = ({
         return;
       }
 
+      // Wait until element is properly mounted
+      if (sharedCanvas && !sharedCanvas.offsetParent) {
+        setTimeout(exec, ANIMATION_END_TIMEOUT);
+        return;
+      }
+
       const newAnimation = RLottie.init(
         containerId,
         container,
diff --git a/src/hooks/useBoundsInSharedCanvas.ts b/src/hooks/useBoundsInSharedCanvas.ts
index 65b2a2b85..208f60700 100644
--- a/src/hooks/useBoundsInSharedCanvas.ts
+++ b/src/hooks/useBoundsInSharedCanvas.ts
@@ -6,6 +6,8 @@ import { round } from '../util/math';
 
 import { useResizeObserver } from './useResizeObserver';
 
+const ANIMATION_END_TIMEOUT = 500;
+
 export default function useBoundsInSharedCanvas(
   containerRef: React.RefObject<HTMLDivElement>,
   sharedCanvasRef?: React.RefObject<HTMLCanvasElement>,
@@ -21,6 +23,12 @@ export default function useBoundsInSharedCanvas(
       return;
     }
 
+    // Wait until elements are properly mounted
+    if (!container.offsetParent || !canvas.offsetParent) {
+      setTimeout(recalculate, ANIMATION_END_TIMEOUT);
+      return;
+    }
+
     const target = container.classList.contains('sticker-set-cover') ? container : container.querySelector('img')!;
     const targetBounds = target.getBoundingClientRect();
     const canvasBounds = canvas.getBoundingClientRect();
diff --git a/src/lib/rlottie/RLottie.ts b/src/lib/rlottie/RLottie.ts
index 47ad1f5f5..d8995208e 100644
--- a/src/lib/rlottie/RLottie.ts
+++ b/src/lib/rlottie/RLottie.ts
@@ -277,7 +277,7 @@ class RLottie {
         canvas, ctx, onLoad,
       });
     } else {
-      if (!container.offsetParent) {
+      if (!container.isConnected) {
         throw new Error('[RLottie] Shared canvas is not mounted');
       }