@remotion/lottie 4.0.344 → 4.0.345

package/dist/cjs/Lottie.js

@@ -26,13 +26,14 @@ const Lottie = ({ animationData, className, direction, loop, playbackRate, style
     const containerRef = (0, react_1.useRef)(null);
     const onAnimationLoadedRef = (0, react_1.useRef)(onAnimationLoaded);
     onAnimationLoadedRef.current = onAnimationLoaded;
-    const [handle] = (0, react_1.useState)(() => (0, remotion_1.delayRender)('Waiting for Lottie animation to load'));
+    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 () => {
-            (0, remotion_1.continueRender)(handle);
+            continueRender(handle);
         };
-    }, [handle]);
+    }, [handle, continueRender]);
     const frame = (0, remotion_1.useCurrentFrame)();
     currentFrameRef.current = frame;
     (0, react_1.useEffect)(() => {
@@ -66,7 +67,7 @@ const Lottie = ({ animationData, className, direction, loop, playbackRate, style
                 (_a = animationRef.current) === null || _a === void 0 ? void 0 : _a.goToAndStop(Math.max(0, frameToSet - 1), true);
                 (_b = animationRef.current) === null || _b === void 0 ? void 0 : _b.goToAndStop(frameToSet, true);
             }
-            (0, remotion_1.continueRender)(handle);
+            continueRender(handle);
         };
         animation.addEventListener('DOMLoaded', onComplete);
         (_a = onAnimationLoadedRef.current) === null || _a === void 0 ? void 0 : _a.call(onAnimationLoadedRef, animation);
@@ -83,6 +84,7 @@ const Lottie = ({ animationData, className, direction, loop, playbackRate, style
         playbackRate,
         preserveAspectRatio,
         renderer,
+        continueRender,
     ]);
     (0, react_1.useEffect)(() => {
         if (animationRef.current && direction) {
@@ -113,14 +115,14 @@ const Lottie = ({ animationData, className, direction, loop, playbackRate, style
             if (currentHref && currentHref === img.href.baseVal) {
                 return;
             }
-            const imgHandle = (0, remotion_1.delayRender)(`Waiting for lottie image with src="${img.href.baseVal}" to load`);
+            const imgHandle = delayRender(`Waiting for lottie image with src="${img.href.baseVal}" to load`);
             // https://stackoverflow.com/a/46839799
             img.addEventListener('load', () => {
-                (0, remotion_1.continueRender)(imgHandle);
+                continueRender(imgHandle);
             }, { once: true });
             img.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', img.href.baseVal);
         });
-    }, [direction, frame, loop, playbackRate]);
+    }, [direction, frame, loop, playbackRate, delayRender, continueRender]);
     return (0, jsx_runtime_1.jsx)("div", { ref: containerRef, className: className, style: style });
 };
 exports.Lottie = Lottie;

package/dist/esm/index.mjs

@@ -18,7 +18,7 @@ var getLottieMetadata = (animationData) => {
 // src/Lottie.tsx
 import lottie from "lottie-web";
 import { useEffect, useRef, useState } from "react";
-import { continueRender, delayRender, useCurrentFrame } from "remotion";
+import { useCurrentFrame, useDelayRender } from "remotion";
 
 // src/utils.ts
 var getLottieFrame = ({
@@ -84,12 +84,13 @@ var Lottie = ({
   const containerRef = useRef(null);
   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]);
+  }, [handle, continueRender]);
   const frame = useCurrentFrame();
   currentFrameRef.current = frame;
   useEffect(() => {
@@ -134,7 +135,8 @@ var Lottie = ({
     loop,
     playbackRate,
     preserveAspectRatio,
-    renderer
+    renderer,
+    continueRender
   ]);
   useEffect(() => {
     if (animationRef.current && direction) {
@@ -170,7 +172,7 @@ var Lottie = ({
       }, { once: true });
       img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", img.href.baseVal);
     });
-  }, [direction, frame, loop, playbackRate]);
+  }, [direction, frame, loop, playbackRate, delayRender, continueRender]);
   return /* @__PURE__ */ jsx("div", {
     ref: containerRef,
     className,

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/lottie"
   },
   "name": "@remotion/lottie",
-  "version": "4.0.344",
+  "version": "4.0.345",
   "description": "Include Lottie animations in Remotion",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -19,7 +19,7 @@
   ],
   "license": "SEE LICENSE IN LICENSE.md",
   "dependencies": {
-    "remotion": "4.0.344"
+    "remotion": "4.0.345"
   },
   "peerDependencies": {
     "lottie-web": "^5",
@@ -40,7 +40,7 @@
     "react-dom": "19.0.0",
     "lottie-web": "5.13.0",
     "eslint": "9.19.0",
-    "@remotion/eslint-config-internal": "4.0.344"
+    "@remotion/eslint-config-internal": "4.0.345"
   },
   "keywords": [
     "remotion",