@mirror-physics/fractal-ui 0.2.0-next.33 → 0.2.0-next.35

package/dist/index.cjs

@@ -1175,12 +1175,16 @@ var import_jsx_runtime18 = require("react/jsx-runtime");
 function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = false, className }) {
   const switcherRef = React10.useRef(null);
   const buttonRefs = React10.useRef([]);
+  const indicatorMotionReadyRef = React10.useRef(false);
   const activeIndex = items.findIndex((item) => item.value === value);
   React10.useLayoutEffect(() => {
     const switcher = switcherRef.current;
     const activeButton = buttonRefs.current[activeIndex];
+    let motionFrame = 0;
     if (!switcher || !activeButton) {
       switcher?.removeAttribute("data-indicator-ready");
+      switcher?.removeAttribute("data-indicator-animate");
+      indicatorMotionReadyRef.current = false;
       return;
     }
     const updateIndicator = () => {
@@ -1191,15 +1195,29 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
       switcher.style.setProperty("--fractal-content-switcher-indicator-width", `${activeButtonRect.width}px`);
       switcher.style.setProperty("--fractal-content-switcher-indicator-height", `${activeButtonRect.height}px`);
       switcher.setAttribute("data-indicator-ready", "true");
+      if (!indicatorMotionReadyRef.current && motionFrame === 0) {
+        motionFrame = window.requestAnimationFrame(() => {
+          indicatorMotionReadyRef.current = true;
+          switcher.setAttribute("data-indicator-animate", "true");
+          motionFrame = 0;
+        });
+      }
     };
     updateIndicator();
-    if (typeof ResizeObserver === "undefined") return;
+    if (typeof ResizeObserver === "undefined") {
+      return () => {
+        if (motionFrame !== 0) window.cancelAnimationFrame(motionFrame);
+      };
+    }
     const resizeObserver = new ResizeObserver(updateIndicator);
     resizeObserver.observe(switcher);
     buttonRefs.current.forEach((button) => {
       if (button) resizeObserver.observe(button);
     });
-    return () => resizeObserver.disconnect();
+    return () => {
+      resizeObserver.disconnect();
+      if (motionFrame !== 0) window.cancelAnimationFrame(motionFrame);
+    };
   }, [activeIndex, items.length]);
   const moveFocus = (index, direction) => {
     let nextIndex = index;