@remotion/lottie 4.0.534 → 4.0.536

package/dist/cjs/Lottie.js

@@ -22,20 +22,14 @@ const LottieContent = ({ animationData, className, direction, style, onAnimation
     const onAnimationLoadedRef = (0, react_1.useRef)(onAnimationLoaded);
     onAnimationLoadedRef.current = onAnimationLoaded;
     const { delayRender, continueRender } = (0, remotion_1.useDelayRender)();
-    const [handle] = (0, react_1.useState)(() => delayRender('Waiting for Lottie animation to load'));
-    // If component unmounts, continue the render
-    (0, react_1.useEffect)(() => {
-        return () => {
-            continueRender(handle);
-        };
-    }, [handle, continueRender]);
     const frame = (0, remotion_1.useCurrentFrame)();
     currentFrameRef.current = frame;
-    (0, react_1.useEffect)(() => {
+    (0, react_1.useLayoutEffect)(() => {
         var _a;
         if (!containerRef.current) {
             return;
         }
+        const handle = delayRender('Waiting for Lottie animation to load');
         animationRef.current = lottie_web_1.default.loadAnimation({
             container: containerRef.current,
             autoplay: false,
@@ -68,22 +62,23 @@ const LottieContent = ({ animationData, className, direction, style, onAnimation
         return () => {
             animation.removeEventListener('DOMLoaded', onComplete);
             animation.destroy();
+            continueRender(handle);
         };
     }, [
         animationData,
         assetsPath,
         direction,
-        handle,
         preserveAspectRatio,
         renderer,
         continueRender,
+        delayRender,
     ]);
-    (0, react_1.useEffect)(() => {
+    (0, react_1.useLayoutEffect)(() => {
         if (animationRef.current && direction) {
             animationRef.current.setDirection(direction === 'backward' ? -1 : 1);
         }
     }, [direction]);
-    (0, react_1.useEffect)(() => {
+    (0, react_1.useLayoutEffect)(() => {
         var _a;
         if (!animationRef.current) {
             return;
@@ -136,6 +131,6 @@ const Lottie = ({ animationData, from, durationInFrames, trimBefore, playbackRat
         styleWhilePostmounted: styleWhilePostmounted !== null && styleWhilePostmounted !== void 0 ? styleWhilePostmounted : null,
         hideWhilePremounted: 'opacity',
     });
-    return (jsx_runtime_1.jsx(remotion_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(remotion_1.Sequence, { layout: "none", from: from, durationInFrames: sequenceDurationInFrames, trimBefore: trimBefore, playbackRate: playbackRate, loop: loop, freeze: freeze, hidden: hidden, name: name !== null && name !== void 0 ? name : '<Lottie>', showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : false, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(LottieContent, { ...props, animationData: animationData, style: premountingStyle !== null && premountingStyle !== void 0 ? premountingStyle : undefined }) }) }));
+    return (jsx_runtime_1.jsx(remotion_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(remotion_1.Sequence, { layout: "none", from: from, durationInFrames: sequenceDurationInFrames, trimBefore: trimBefore, playbackRate: playbackRate, loop: loop, freeze: freeze, hidden: hidden, name: name !== null && name !== void 0 ? name : '<Lottie>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/lottie/lottie", showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : false, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(LottieContent, { ...props, animationData: animationData, style: premountingStyle !== null && premountingStyle !== void 0 ? premountingStyle : undefined }) }) }));
 };
 exports.Lottie = Lottie;

package/dist/esm/index.mjs

@@ -17,7 +17,7 @@ var getLottieMetadata = (animationData) => {
 };
 // src/Lottie.tsx
 import lottie from "lottie-web";
-import { useEffect, useRef, useState } from "react";
+import { useLayoutEffect, useRef } from "react";
 import {
   Freeze,
   Sequence,
@@ -84,18 +84,13 @@ var LottieContent = ({
   const onAnimationLoadedRef = useRef(onAnimationLoaded);
   onAnimationLoadedRef.current = onAnimationLoaded;
   const { delayRender, continueRender } = useDelayRender();
-  const [handle] = useState(() => delayRender("Waiting for Lottie animation to load"));
-  useEffect(() => {
-    return () => {
-      continueRender(handle);
-    };
-  }, [handle, continueRender]);
   const frame = useCurrentFrame();
   currentFrameRef.current = frame;
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!containerRef.current) {
       return;
     }
+    const handle = delayRender("Waiting for Lottie animation to load");
     animationRef.current = lottie.loadAnimation({
       container: containerRef.current,
       autoplay: false,
@@ -124,22 +119,23 @@ var LottieContent = ({
     return () => {
       animation.removeEventListener("DOMLoaded", onComplete);
       animation.destroy();
+      continueRender(handle);
     };
   }, [
     animationData,
     assetsPath,
     direction,
-    handle,
     preserveAspectRatio,
     renderer,
-    continueRender
+    continueRender,
+    delayRender
   ]);
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (animationRef.current && direction) {
       animationRef.current.setDirection(direction === "backward" ? -1 : 1);
     }
   }, [direction]);
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!animationRef.current) {
       return;
     }
@@ -228,6 +224,7 @@ var Lottie = ({
       freeze,
       hidden,
       name: name ?? "<Lottie>",
+      _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/lottie/lottie",
       showInTimeline: showInTimeline ?? false,
       _remotionInternalPremountDisplay: effectivePremountFor || null,
       _remotionInternalPostmountDisplay: effectivePostmountFor || null,
@@ -242,6 +239,6 @@ var Lottie = ({
   });
 };
 export {
-  getLottieMetadata,
-  Lottie
+  Lottie,
+  getLottieMetadata
 };

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/lottie"
 	},
 	"name": "@remotion/lottie",
-	"version": "4.0.534",
+	"version": "4.0.536",
 	"description": "Include Lottie animations in Remotion",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -25,7 +25,7 @@
 	],
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"remotion": "4.0.534"
+		"remotion": "4.0.536"
 	},
 	"peerDependencies": {
 		"lottie-web": "^5",
@@ -45,7 +45,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"lottie-web": "5.13.0",
-		"@remotion/eslint-config-internal": "4.0.534",
+		"@remotion/eslint-config-internal": "4.0.536",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},