Animated Sticker, Sticker View: Fix initializing in hidden containers

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,

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();

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');
       }