@lotics/ui 2.5.0 → 2.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
@@ -102,6 +102,7 @@
     "./counter": "./src/counter.tsx",
     "./link_button": "./src/link_button.tsx",
     "./sort_header": "./src/sort_header.tsx",
+    "./skeleton": "./src/skeleton.tsx",
     "./table": "./src/table.tsx",
     "./detail_row": "./src/detail_row.tsx",
     "./scan_field": "./src/scan_field.tsx",

package/src/skeleton.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useRef } from "react";
+import { Animated, type DimensionValue, type StyleProp, type ViewStyle } from "react-native";
+import { colors } from "./colors";
+
+export interface SkeletonProps {
+  /** Width — px or a percentage string ("100%", "60%"). Default "100%". */
+  width?: DimensionValue;
+  /** Height in px. Default 16. */
+  height?: number;
+  /** Corner radius. Default 6. */
+  radius?: number;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * A loading placeholder — a softly pulsing zinc tile that stands in for content
+ * not yet loaded. The point is **zero layout shift**: reserve the SAME footprint
+ * as the element it replaces, so nothing jumps when the data arrives. Compose
+ * several (with the loaded layout's widths/heights) to mirror a row or card, and
+ * render them in the load slot instead of a spinner that collapses the surface.
+ *
+ * Decorative — excluded from the accessibility tree (the surrounding region
+ * should carry a "loading" affordance if one is needed).
+ */
+export function Skeleton(props: SkeletonProps) {
+  const { width = "100%", height = 16, radius = 6, style } = props;
+  const pulse = useRef(new Animated.Value(0.6)).current;
+
+  useEffect(() => {
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(pulse, { toValue: 1, duration: 750, useNativeDriver: true }),
+        Animated.timing(pulse, { toValue: 0.6, duration: 750, useNativeDriver: true }),
+      ]),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [pulse]);
+
+  return (
+    <Animated.View
+      accessible={false}
+      importantForAccessibility="no-hide-descendants"
+      style={[{ width, height, borderRadius: radius, backgroundColor: colors.zinc[100], opacity: pulse }, style]}
+    />
+  );
+}