@deriv-web-design/ui 0.1.18 → 0.1.19

package/components.manifest.json

@@ -891,7 +891,7 @@
       "name": "DotLottieInView",
       "source": "components/DotLottieInView/DotLottieInView.tsx",
       "props": {},
-      "description": "Plays a .lottie once when it scrolls into view. Stops and resets when it leaves view. When it enters view again, it plays once more. Set `enabled={false}` to force stop (e.g. hidden slides) without relying on geometry alone. The player itself is fetched lazily, the first time this instance is both enabled and in view — so a page with no animation never downloads it, and a below-the-fold band does not pay for it during initial load."
+      "description": "Plays a .lottie once when it scrolls into view. Stops and resets when it leaves view. When it enters view again, it plays once more. Set `enabled={false}` to force stop (e.g. hidden slides) without relying on geometry alone. The player itself is fetched lazily, the first time this instance is in view — so a page with no animation never downloads it, and a below-the-fold band does not pay for it during initial load. `enabled` gates playback only: a consumer that crossfades between stacked instances needs them all loaded, not just the one currently showing."
     },
     "DownloadBadge": {
       "name": "DownloadBadge",

package/dist/index.d.mts

@@ -844,9 +844,11 @@ type DotLottieInViewProps = Omit<ComponentProps<typeof DotLottieReact>, "autopla
  * When it enters view again, it plays once more. Set `enabled={false}` to force stop
  * (e.g. hidden slides) without relying on geometry alone.
  *
- * The player itself is fetched lazily, the first time this instance is both
- * enabled and in view — so a page with no animation never downloads it, and a
- * below-the-fold band does not pay for it during initial load.
+ * The player itself is fetched lazily, the first time this instance is in view —
+ * so a page with no animation never downloads it, and a below-the-fold band does
+ * not pay for it during initial load. `enabled` gates playback only: a consumer
+ * that crossfades between stacked instances needs them all loaded, not just the
+ * one currently showing.
  */
 declare function DotLottieInView({ enabled, rootMargin, threshold, className, style, poster, ...dotProps }: DotLottieInViewProps): react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -844,9 +844,11 @@ type DotLottieInViewProps = Omit<ComponentProps<typeof DotLottieReact>, "autopla
  * When it enters view again, it plays once more. Set `enabled={false}` to force stop
  * (e.g. hidden slides) without relying on geometry alone.
  *
- * The player itself is fetched lazily, the first time this instance is both
- * enabled and in view — so a page with no animation never downloads it, and a
- * below-the-fold band does not pay for it during initial load.
+ * The player itself is fetched lazily, the first time this instance is in view —
+ * so a page with no animation never downloads it, and a below-the-fold band does
+ * not pay for it during initial load. `enabled` gates playback only: a consumer
+ * that crossfades between stacked instances needs them all loaded, not just the
+ * one currently showing.
  */
 declare function DotLottieInView({ enabled, rootMargin, threshold, className, style, poster, ...dotProps }: DotLottieInViewProps): react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -2676,7 +2676,7 @@ function DotLottieInView({
   }, [rootMargin, threshold]);
   (0, import_react12.useEffect)(() => {
     if (mounted) return;
-    if (!(inView && enabled)) return;
+    if (!inView) return;
     if (typeof window === "undefined") return;
     let cancelled = false;
     const commit = () => {
@@ -2691,15 +2691,23 @@ function DotLottieInView({
       }
       if (timerId !== null) window.clearTimeout(timerId);
     };
-  }, [inView, enabled, mounted]);
+  }, [inView, mounted]);
   (0, import_react12.useEffect)(() => {
     if (!dotLottie) return;
     if (!enabled || !inView) {
       dotLottie.stop();
       return;
     }
-    dotLottie.stop();
-    dotLottie.play();
+    const start = () => {
+      dotLottie.stop();
+      dotLottie.play();
+    };
+    if (dotLottie.isLoaded) {
+      start();
+      return;
+    }
+    dotLottie.addEventListener("load", start);
+    return () => dotLottie.removeEventListener("load", start);
   }, [dotLottie, enabled, inView]);
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "div",