@deriv-web-design/ui 0.1.17 → 0.1.18

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."
+      "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."
     },
     "DownloadBadge": {
       "name": "DownloadBadge",
@@ -1836,6 +1836,11 @@
               "required": true,
               "description": "URL to the .lottie file or any image asset (png, jpg, svg, webp…)"
             },
+            "posterUrl": {
+              "type": "string",
+              "required": false,
+              "description": "Still frame painted while an animation's player and engine are loading. Only used when the item resolves to `\"lottie\"`. The WebAssembly engine is ~630 KB compressed and one engine serves every animation on the page, so on a cold visit over a slow connection the first animated band can sit empty for seconds. A poster turns that into a progressive load instead of a hole in the layout. Ignored once the animation is playing."
+            },
             "title": {
               "type": "string",
               "required": true,
@@ -1843,6 +1848,16 @@
             }
           }
         },
+        "mediaRootMargin": {
+          "type": "string",
+          "required": false,
+          "description": "`rootMargin` for the observer that decides when an animation's player may load and play. Forwarded to `DotLottieInView`. The default starts the work only once a band is actually on screen, which is the safe choice: the engine is large, and fetching it earlier competes with whatever the visitor is currently looking at — including the LCP image. Widen it (e.g. `\"600px 0px\"`) on pages where the animated band sits well below the fold and you would rather it were ready on arrival."
+        },
+        "mediaThreshold": {
+          "type": "number | number[]",
+          "required": false,
+          "description": "`threshold` for that same observer. Forwarded to `DotLottieInView`."
+        },
         "variant": {
           "type": "\"media-left\" | \"media-right\"",
           "required": false,

package/dist/index.d.mts

@@ -750,6 +750,16 @@ interface FeatureScrollItem {
     mediaType?: "lottie" | "image";
     /** URL to the .lottie file or any image asset (png, jpg, svg, webp…) */
     mediaUrl: string;
+    /**
+     * Still frame painted while an animation's player and engine are loading.
+     *
+     * Only used when the item resolves to `"lottie"`. The WebAssembly engine is
+     * ~630 KB compressed and one engine serves every animation on the page, so
+     * on a cold visit over a slow connection the first animated band can sit
+     * empty for seconds. A poster turns that into a progressive load instead of
+     * a hole in the layout. Ignored once the animation is playing.
+     */
+    posterUrl?: string;
 }
 interface FeatureScrollProps extends HTMLAttributes<HTMLElement> {
     /** Section heading rendered as an H2 */
@@ -764,10 +774,27 @@ interface FeatureScrollProps extends HTMLAttributes<HTMLElement> {
      * @default "media-right"
      */
     variant?: "media-left" | "media-right";
+    /**
+     * `rootMargin` for the observer that decides when an animation's player may
+     * load and play. Forwarded to `DotLottieInView`.
+     *
+     * The default starts the work only once a band is actually on screen, which
+     * is the safe choice: the engine is large, and fetching it earlier competes
+     * with whatever the visitor is currently looking at — including the LCP
+     * image. Widen it (e.g. `"600px 0px"`) on pages where the animated band sits
+     * well below the fold and you would rather it were ready on arrival.
+     * @default "0px"
+     */
+    mediaRootMargin?: string;
+    /**
+     * `threshold` for that same observer. Forwarded to `DotLottieInView`.
+     * @default 0.2
+     */
+    mediaThreshold?: number | number[];
 }
 
 declare const FEATURE_SCROLL_DATA: FeatureScrollItem[];
-declare const FeatureScroll: ({ header, items, variant, className, ...props }: FeatureScrollProps) => react_jsx_runtime.JSX.Element;
+declare const FeatureScroll: ({ header, items, variant, className, mediaRootMargin, mediaThreshold, ...props }: FeatureScrollProps) => react_jsx_runtime.JSX.Element;
 
 type FeatureSplitImagePosition = "left" | "right";
 interface FeatureSplitProps {
@@ -799,13 +826,29 @@ type DotLottieInViewProps = Omit<ComponentProps<typeof DotLottieReact>, "autopla
     enabled?: boolean;
     rootMargin?: string;
     threshold?: number | number[];
+    /**
+     * Painted in place of the player until the animation is ready, and as the
+     * Suspense fallback while the player chunk loads.
+     *
+     * Worth supplying on anything a visitor meets early on a slow connection:
+     * the WebAssembly engine is ~630 KB compressed and one engine serves every
+     * animation on the page, so the first animated band on a cold visit can sit
+     * empty for seconds. A still frame makes that a progressive load rather than
+     * a hole in the layout. A `ReactNode` rather than a URL so the consumer can
+     * pass a properly sized, responsive `<img>` rather than a bare `src`.
+     */
+    poster?: ReactNode;
 };
 /**
  * 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.
  */
-declare function DotLottieInView({ enabled, rootMargin, threshold, className, style, ...dotProps }: DotLottieInViewProps): react_jsx_runtime.JSX.Element;
+declare function DotLottieInView({ enabled, rootMargin, threshold, className, style, poster, ...dotProps }: DotLottieInViewProps): react_jsx_runtime.JSX.Element;
 
 /** Visual colour theme for each card — matches the Figma palette. */
 type StickyCardTheme = "light" | "coral" | "dark";

package/dist/index.d.ts

@@ -750,6 +750,16 @@ interface FeatureScrollItem {
     mediaType?: "lottie" | "image";
     /** URL to the .lottie file or any image asset (png, jpg, svg, webp…) */
     mediaUrl: string;
+    /**
+     * Still frame painted while an animation's player and engine are loading.
+     *
+     * Only used when the item resolves to `"lottie"`. The WebAssembly engine is
+     * ~630 KB compressed and one engine serves every animation on the page, so
+     * on a cold visit over a slow connection the first animated band can sit
+     * empty for seconds. A poster turns that into a progressive load instead of
+     * a hole in the layout. Ignored once the animation is playing.
+     */
+    posterUrl?: string;
 }
 interface FeatureScrollProps extends HTMLAttributes<HTMLElement> {
     /** Section heading rendered as an H2 */
@@ -764,10 +774,27 @@ interface FeatureScrollProps extends HTMLAttributes<HTMLElement> {
      * @default "media-right"
      */
     variant?: "media-left" | "media-right";
+    /**
+     * `rootMargin` for the observer that decides when an animation's player may
+     * load and play. Forwarded to `DotLottieInView`.
+     *
+     * The default starts the work only once a band is actually on screen, which
+     * is the safe choice: the engine is large, and fetching it earlier competes
+     * with whatever the visitor is currently looking at — including the LCP
+     * image. Widen it (e.g. `"600px 0px"`) on pages where the animated band sits
+     * well below the fold and you would rather it were ready on arrival.
+     * @default "0px"
+     */
+    mediaRootMargin?: string;
+    /**
+     * `threshold` for that same observer. Forwarded to `DotLottieInView`.
+     * @default 0.2
+     */
+    mediaThreshold?: number | number[];
 }
 
 declare const FEATURE_SCROLL_DATA: FeatureScrollItem[];
-declare const FeatureScroll: ({ header, items, variant, className, ...props }: FeatureScrollProps) => react_jsx_runtime.JSX.Element;
+declare const FeatureScroll: ({ header, items, variant, className, mediaRootMargin, mediaThreshold, ...props }: FeatureScrollProps) => react_jsx_runtime.JSX.Element;
 
 type FeatureSplitImagePosition = "left" | "right";
 interface FeatureSplitProps {
@@ -799,13 +826,29 @@ type DotLottieInViewProps = Omit<ComponentProps<typeof DotLottieReact>, "autopla
     enabled?: boolean;
     rootMargin?: string;
     threshold?: number | number[];
+    /**
+     * Painted in place of the player until the animation is ready, and as the
+     * Suspense fallback while the player chunk loads.
+     *
+     * Worth supplying on anything a visitor meets early on a slow connection:
+     * the WebAssembly engine is ~630 KB compressed and one engine serves every
+     * animation on the page, so the first animated band on a cold visit can sit
+     * empty for seconds. A still frame makes that a progressive load rather than
+     * a hole in the layout. A `ReactNode` rather than a URL so the consumer can
+     * pass a properly sized, responsive `<img>` rather than a bare `src`.
+     */
+    poster?: ReactNode;
 };
 /**
  * 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.
  */
-declare function DotLottieInView({ enabled, rootMargin, threshold, className, style, ...dotProps }: DotLottieInViewProps): react_jsx_runtime.JSX.Element;
+declare function DotLottieInView({ enabled, rootMargin, threshold, className, style, poster, ...dotProps }: DotLottieInViewProps): react_jsx_runtime.JSX.Element;
 
 /** Visual colour theme for each card — matches the Figma palette. */
 type StickyCardTheme = "light" | "coral" | "dark";

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // index.ts
@@ -2635,18 +2645,22 @@ var import_react13 = require("react");
 
 // components/DotLottieInView/DotLottieInView.tsx
 var import_react12 = require("react");
-var import_dotlottie_react = require("@lottiefiles/dotlottie-react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
+var DotLottiePlayer = (0, import_react12.lazy)(
+  () => import("@lottiefiles/dotlottie-react").then((m) => ({ default: m.DotLottieReact }))
+);
 function DotLottieInView({
   enabled = true,
   rootMargin = "0px",
   threshold = 0.2,
   className,
   style,
+  poster,
   ...dotProps
 }) {
   const wrapRef = (0, import_react12.useRef)(null);
   const [inView, setInView] = (0, import_react12.useState)(false);
+  const [mounted, setMounted] = (0, import_react12.useState)(false);
   const [dotLottie, setDotLottie] = (0, import_react12.useState)(null);
   (0, import_react12.useEffect)(() => {
     const el = wrapRef.current;
@@ -2660,6 +2674,24 @@ function DotLottieInView({
     observer.observe(el);
     return () => observer.disconnect();
   }, [rootMargin, threshold]);
+  (0, import_react12.useEffect)(() => {
+    if (mounted) return;
+    if (!(inView && enabled)) return;
+    if (typeof window === "undefined") return;
+    let cancelled = false;
+    const commit = () => {
+      if (!cancelled) setMounted(true);
+    };
+    const idleId = typeof window.requestIdleCallback === "function" ? window.requestIdleCallback(commit, { timeout: 400 }) : null;
+    const timerId = idleId === null ? window.setTimeout(commit, 0) : null;
+    return () => {
+      cancelled = true;
+      if (idleId !== null && typeof window.cancelIdleCallback === "function") {
+        window.cancelIdleCallback(idleId);
+      }
+      if (timerId !== null) window.clearTimeout(timerId);
+    };
+  }, [inView, enabled, mounted]);
   (0, import_react12.useEffect)(() => {
     if (!dotLottie) return;
     if (!enabled || !inView) {
@@ -2684,15 +2716,15 @@ function DotLottieInView({
         backgroundColor: "transparent",
         ...style
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-        import_dotlottie_react.DotLottieReact,
+      children: mounted ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react12.Suspense, { fallback: poster ?? null, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        DotLottiePlayer,
         {
           ...dotProps,
           loop: false,
           autoplay: false,
           dotLottieRefCallback: setDotLottie
         }
-      )
+      ) }) : poster ?? null
     }
   );
 }
@@ -2764,26 +2796,45 @@ var ChevronRight2 = () => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     )
   }
 );
+function mediaSrc(item) {
+  return typeof item.mediaUrl === "string" && item.mediaUrl !== "" ? item.mediaUrl : null;
+}
 function resolveMediaType(item) {
   if (item.mediaType) return item.mediaType;
-  return item.mediaUrl.split("?")[0].endsWith(".lottie") ? "lottie" : "image";
+  const src = mediaSrc(item);
+  return src?.split("?")[0].endsWith(".lottie") ? "lottie" : "image";
 }
-var MediaRenderer = ({ item, active }) => {
+var MediaRenderer = ({ item, active, rootMargin, threshold }) => {
+  const src = mediaSrc(item);
+  if (!src) return null;
   if (resolveMediaType(item) === "lottie") {
     return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       DotLottieInView,
       {
-        src: item.mediaUrl,
-        enabled: active
+        src,
+        enabled: active,
+        rootMargin,
+        threshold,
+        poster: item.posterUrl ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          "img",
+          {
+            src: item.posterUrl,
+            alt: "",
+            "aria-hidden": "true",
+            loading: "lazy",
+            decoding: "async"
+          }
+        ) : void 0
       }
     );
   }
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     "img",
     {
-      src: item.mediaUrl,
+      src,
       alt: item.title,
-      loading: "lazy"
+      loading: "lazy",
+      decoding: "async"
     }
   );
 };
@@ -2792,10 +2843,16 @@ var FeatureScroll = ({
   items,
   variant = "media-right",
   className,
+  // Destructured, not spread: `...props` lands on the <section>, and an
+  // unknown attribute there is a React DOM warning at best.
+  mediaRootMargin,
+  mediaThreshold,
   ...props
 }) => {
   const [activeIndex, setActiveIndex] = (0, import_react13.useState)(0);
+  const [mobileActiveIndex, setMobileActiveIndex] = (0, import_react13.useState)(0);
   const titleRefs = (0, import_react13.useRef)([]);
+  const mobileItemRefs = (0, import_react13.useRef)([]);
   const mediaColRef = (0, import_react13.useRef)(null);
   (0, import_react13.useLayoutEffect)(() => {
     if (items.length === 0) return;
@@ -2843,6 +2900,40 @@ var FeatureScroll = ({
       if (rafId !== 0) window.cancelAnimationFrame(rafId);
     };
   }, [items.length]);
+  (0, import_react13.useEffect)(() => {
+    if (items.length === 0) return;
+    if (typeof window === "undefined") return;
+    const ratios = /* @__PURE__ */ new Map();
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (window.matchMedia("(min-width: 992px)").matches) return;
+        for (const entry of entries) {
+          const idx = Number(entry.target.getAttribute("data-fs-mobile-idx"));
+          if (!Number.isFinite(idx)) continue;
+          ratios.set(idx, entry.isIntersecting ? entry.intersectionRatio : 0);
+        }
+        let best = 0;
+        let bestRatio = -1;
+        for (const [idx, ratio] of ratios) {
+          if (ratio > bestRatio) {
+            bestRatio = ratio;
+            best = idx;
+          }
+        }
+        if (bestRatio <= 0) return;
+        setMobileActiveIndex((prev) => prev === best ? prev : best);
+      },
+      {
+        root: null,
+        rootMargin: "-28% 0px -28% 0px",
+        threshold: [0, 0.15, 0.3, 0.5, 0.75, 1]
+      }
+    );
+    for (const el of mobileItemRefs.current) {
+      if (el) observer.observe(el);
+    }
+    return () => observer.disconnect();
+  }, [items.length]);
   const rootClass = [
     "fs",
     `fs--${variant}`,
@@ -2870,7 +2961,9 @@ var FeatureScroll = ({
                 MediaRenderer,
                 {
                   item,
-                  active: i === activeIndex
+                  active: i === activeIndex,
+                  rootMargin: mediaRootMargin,
+                  threshold: mediaThreshold
                 }
               )
             },
@@ -2910,22 +3003,41 @@ var FeatureScroll = ({
         i
       )) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "fs__mobile-list", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "fs__mobile-item", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h3", { className: "fs__item-title", children: item.title }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "fs__mobile-media", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MediaRenderer, { item, active: true }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "fs__item-desc", children: item.description }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
-        "a",
-        {
-          href: item.link,
-          className: "fs__item-link",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: item.linkLabel }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ChevronRight2, {})
-          ]
-        }
-      )
-    ] }, i)) })
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "fs__mobile-list", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+      "div",
+      {
+        className: "fs__mobile-item",
+        "data-fs-mobile-idx": i,
+        ref: (el) => {
+          mobileItemRefs.current[i] = el;
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h3", { className: "fs__item-title", children: item.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "fs__mobile-media", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            MediaRenderer,
+            {
+              item,
+              active: i === mobileActiveIndex,
+              rootMargin: mediaRootMargin,
+              threshold: mediaThreshold
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "fs__item-desc", children: item.description }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+            "a",
+            {
+              href: item.link,
+              className: "fs__item-link",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: item.linkLabel }),
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ChevronRight2, {})
+              ]
+            }
+          )
+        ]
+      },
+      i
+    )) })
   ] }) });
 };