@webority-technologies/mobile 0.0.3 → 0.0.5

package/README.md

@@ -394,6 +394,50 @@ For runnable usage of every component, see [`example/`](../../example/).
 
 ---
 
+## Designing skeleton-aware components
+
+Presentational primitives (`Card`, `ListItem`, `Avatar`, `Badge`) accept an optional
+`loading?: boolean` prop. When `true`, the component renders its normal layout wrapped
+in `<SkeletonContent loading mode="auto">` — the walker replaces every `<Text>`,
+`<Image>`, and sized leaf `<View>` with a shimmer block matching the element's
+dimensions. When `loading` is `false` or omitted, behaviour is unchanged.
+
+Conventions for components that opt into this pattern:
+
+- **Render gracefully with undefined data.** Use optional chaining and string defaults
+  so the auto walker has leaves to skeletonize even before data arrives:
+  `{item?.title ?? ' '}`, `{item?.subtitle ?? ' '}`. Never let a `<Text>` render `undefined`.
+- **Use explicit dimensions on visual elements.** Set `width`/`height` on `<Image>` and
+  `<View>` leaves, and `fontSize` on `<Text>`, so the walker can size each shimmer
+  block correctly. Inline styles, `StyleSheet.create`, and arrays all work — they get
+  flattened.
+- **Wrap once at the top.** Don't sprinkle `<SkeletonContent>` inside subtrees; wrap the
+  component's final return so the entire layout becomes a single coherent placeholder.
+- **For data-driven lists, prefer `<SkeletonList>`.** It owns the "show N placeholder
+  rows while loading, then real data" branching so callers don't hand-roll it.
+
+Before / after with `Card`:
+
+```tsx
+// Before — caller hand-rolls a placeholder branch
+{loading ? (
+  <SkeletonCard />
+) : (
+  <Card>
+    <Text>{site.name}</Text>
+    <Text>{site.address}</Text>
+  </Card>
+)}
+
+// After — Card itself is skeleton-aware
+<Card loading={loading}>
+  <Text>{site?.name ?? ' '}</Text>
+  <Text>{site?.address ?? ' '}</Text>
+</Card>
+```
+
+---
+
 ## License
 
 MIT. Copyright © Webority Technologies.

package/lib/commonjs/components/Avatar/Avatar.js

@@ -7,6 +7,7 @@ exports.default = exports.AvatarGroup = exports.Avatar = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _index = require("../../theme/index.js");
+var _index2 = require("../Skeleton/index.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const sizeMap = {
@@ -69,6 +70,7 @@ const Avatar = exports.Avatar = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     statusPosition = 'bottomRight',
     backgroundColor,
     color,
+    loading = false,
     accessibilityLabel,
     style,
     textStyle,
@@ -89,7 +91,7 @@ const Avatar = exports.Avatar = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   const statusSize = Math.max(8, Math.round(dimension * 0.25));
   const statusBorder = 2;
   const a11yLabel = accessibilityLabel ?? (name ? `${name}'s avatar` : 'Avatar');
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+  const rendered = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     ref: ref,
     style: [styles.root, {
       width: dimension,
@@ -119,7 +121,7 @@ const Avatar = exports.Avatar = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
       }, textStyle],
       numberOfLines: 1,
       allowFontScaling: false,
-      children: initials
+      children: initials ?? ' '
     }), status ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [styles.status, statusPosition === 'topRight' ? styles.statusTopRight : styles.statusBottomRight, {
         width: statusSize,
@@ -133,6 +135,14 @@ const Avatar = exports.Avatar = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
       pointerEvents: "none"
     }) : null]
   });
+  if (loading) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.SkeletonContent, {
+      loading: true,
+      mode: "auto",
+      children: rendered
+    });
+  }
+  return rendered;
 });
 Avatar.displayName = 'Avatar';
 const styles = _reactNative.StyleSheet.create({

package/lib/commonjs/components/Badge/Badge.js

@@ -7,6 +7,7 @@ exports.default = exports.Badge = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _index = require("../../theme/index.js");
+var _index2 = require("../Skeleton/index.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const toneFor = (theme, tone) => {
@@ -102,6 +103,7 @@ const Badge = exports.Badge = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
     tone = 'error',
     size = 'sm',
     invisible = false,
+    loading = false,
     children,
     anchor = 'topRight',
     pulse = false,
@@ -174,23 +176,28 @@ const Badge = exports.Badge = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
       }, textStyle],
       numberOfLines: 1,
       allowFontScaling: false,
-      children: formatted
+      children: formatted ?? ' '
     }) : null
   }) : null;
-  if (children) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      ref: ref,
-      style: [styles.wrapper, style],
-      testID: testID,
-      children: [children, badgeContent]
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+  const rendered = children ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    ref: ref,
+    style: [styles.wrapper, style],
+    testID: testID,
+    children: [children, badgeContent]
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     ref: ref,
     style: style,
     testID: testID,
     children: badgeContent
   });
+  if (loading) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.SkeletonContent, {
+      loading: true,
+      mode: "auto",
+      children: rendered
+    });
+  }
+  return rendered;
 });
 Badge.displayName = 'Badge';
 const styles = _reactNative.StyleSheet.create({

package/lib/commonjs/components/Card/Card.js

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _index = require("../../theme/index.js");
 var _usePressAnimation = require("../../hooks/usePressAnimation.js");
 var _hapticUtils = require("../../utils/hapticUtils.js");
+var _index2 = require("../Skeleton/index.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const paddingMap = {
@@ -32,6 +33,7 @@ const Card = exports.Card = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
     imageHeight = 160,
     imageAspectRatio,
     imageOverlay,
+    loading = false,
     onPress,
     accessibilityLabel,
     accessibilityHint,
@@ -132,12 +134,13 @@ const Card = exports.Card = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
       children: innerContent
     })]
   }) : innerContent;
+  let rendered;
   if (isInteractive) {
     const handlePress = event => {
       (0, _hapticUtils.triggerHaptic)('selection');
       onPress?.(event);
     };
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    rendered = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
       style: [{
         transform: [{
           scale
@@ -161,16 +164,25 @@ const Card = exports.Card = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
         children: content
       })
     });
+  } else {
+    rendered = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      ref: ref,
+      accessibilityLabel: accessibilityLabel,
+      accessibilityHint: accessibilityHint,
+      accessibilityRole: accessibilityRole,
+      testID: testID,
+      style: [containerStyle, style],
+      children: content
+    });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    ref: ref,
-    accessibilityLabel: accessibilityLabel,
-    accessibilityHint: accessibilityHint,
-    accessibilityRole: accessibilityRole,
-    testID: testID,
-    style: [containerStyle, style],
-    children: content
-  });
+  if (loading) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.SkeletonContent, {
+      loading: true,
+      mode: "auto",
+      children: rendered
+    });
+  }
+  return rendered;
 });
 Card.displayName = 'Card';
 const buildStyles = theme => _reactNative.StyleSheet.create({

package/lib/commonjs/components/ListItem/ListItem.js

@@ -10,6 +10,7 @@ var _index = require("../../theme/index.js");
 var _usePressAnimation = require("../../hooks/usePressAnimation.js");
 var _hapticUtils = require("../../utils/hapticUtils.js");
 var _index2 = require("../Swipeable/index.js");
+var _index3 = require("../Skeleton/index.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const sizeFor = (theme, size) => {
@@ -56,6 +57,7 @@ const chevronStyles = _reactNative.StyleSheet.create({
 const ListItem = exports.ListItem = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   const {
     title,
+    loading = false,
     subtitle,
     description,
     left,
@@ -108,7 +110,7 @@ const ListItem = exports.ListItem = /*#__PURE__*/(0, _react.forwardRef)((props,
           color: disabled ? theme.colors.text.disabled : theme.colors.text.primary
         }],
         numberOfLines: 1,
-        children: title
+        children: title ?? ' '
       }), subtitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [styles.subtitle, {
           fontSize: sz.subtitleSize,
@@ -179,15 +181,20 @@ const ListItem = exports.ListItem = /*#__PURE__*/(0, _react.forwardRef)((props,
 
   // Wrap in Swipeable only when at least one side has actions; otherwise keep zero gesture overhead.
   const hasSwipe = leftActions && leftActions.length > 0 || rightActions && rightActions.length > 0;
-  if (hasSwipe) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Swipeable, {
-      leftActions: leftActions,
-      rightActions: rightActions,
-      accessibilityLabel: a11yLabel,
-      children: rendered
+  const final = hasSwipe ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Swipeable, {
+    leftActions: leftActions,
+    rightActions: rightActions,
+    accessibilityLabel: a11yLabel,
+    children: rendered
+  }) : rendered;
+  if (loading) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.SkeletonContent, {
+      loading: true,
+      mode: "auto",
+      children: final
     });
   }
-  return rendered;
+  return final;
 });
 ListItem.displayName = 'ListItem';
 const buildStyles = theme => _reactNative.StyleSheet.create({

package/lib/commonjs/components/Skeleton/SkeletonContent.js

@@ -113,6 +113,7 @@ const SkeletonContent = ({
   variant = 'shimmer',
   speed = 'normal',
   mode = 'auto',
+  count = 1,
   style,
   testID
 }) => {
@@ -121,13 +122,18 @@ const SkeletonContent = ({
       children: children
     });
   }
+  const repeated = count > 1 ? Array.from({
+    length: count
+  }, (_, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
+    children: children
+  }, `sk-rep-${i}`)) : children;
   if (mode === 'block') {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockSkeleton, {
       style: style,
       testID: testID,
       variant: variant,
       speed: speed,
-      children: children
+      children: repeated
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -137,7 +143,7 @@ const SkeletonContent = ({
     accessibilityLabel: "Loading",
     accessibilityRole: "progressbar",
     accessibilityLiveRegion: "polite",
-    children: skeletonizeNode(children, variant, speed)
+    children: skeletonizeNode(repeated, variant, speed)
   });
 };
 exports.SkeletonContent = SkeletonContent;

package/lib/commonjs/components/Skeleton/SkeletonList.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SkeletonList = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _SkeletonContent = require("./SkeletonContent.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Drop-in FlatList replacement that renders `placeholderCount` skeleton rows while
+ * `loading` is true, then transitions to a real `<FlatList>` of `data` once loaded.
+ *
+ * Solves the "FlatList with empty data renders nothing" problem so consumer screens
+ * don't have to maintain a separate placeholder branch.
+ *
+ * @example
+ * <SkeletonList
+ *   loading={isLoading}
+ *   data={sites}
+ *   renderItem={({ item }) => <SiteCard item={item} />}
+ *   renderPlaceholder={() => <SiteCard loading />}
+ *   placeholderCount={3}
+ *   horizontal
+ * />
+ */
+function SkeletonListInner(props) {
+  const {
+    loading,
+    data,
+    renderItem,
+    renderPlaceholder,
+    placeholderCount = 3,
+    variant,
+    speed,
+    placeholderContainerStyle,
+    horizontal,
+    contentContainerStyle,
+    style,
+    testID,
+    ...rest
+  } = props;
+  if (loading) {
+    const slots = Array.from({
+      length: Math.max(0, placeholderCount)
+    }, (_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
+      children: renderPlaceholder ? renderPlaceholder(index) : null
+    }, `sk-list-${index}`));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkeletonContent.SkeletonContent, {
+      loading: true,
+      variant: variant,
+      speed: speed,
+      style: style,
+      testID: testID,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [horizontal ? styles.row : styles.column, placeholderContainerStyle],
+        children: slots
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+    data: data ?? [],
+    renderItem: renderItem,
+    horizontal: horizontal,
+    contentContainerStyle: contentContainerStyle,
+    style: style,
+    testID: testID,
+    ...rest
+  });
+}
+const styles = {
+  row: {
+    flexDirection: 'row'
+  },
+  column: {
+    flexDirection: 'column'
+  }
+};
+const SkeletonList = exports.SkeletonList = SkeletonListInner;
+//# sourceMappingURL=SkeletonList.js.map

package/lib/commonjs/components/Skeleton/index.js

@@ -33,6 +33,12 @@ Object.defineProperty(exports, "SkeletonContent", {
     return _SkeletonContent.SkeletonContent;
   }
 });
+Object.defineProperty(exports, "SkeletonList", {
+  enumerable: true,
+  get: function () {
+    return _SkeletonList.SkeletonList;
+  }
+});
 Object.defineProperty(exports, "SkeletonListItem", {
   enumerable: true,
   get: function () {
@@ -53,5 +59,6 @@ Object.defineProperty(exports, "default", {
 });
 var _Skeleton = _interopRequireWildcard(require("./Skeleton.js"));
 var _SkeletonContent = require("./SkeletonContent.js");
+var _SkeletonList = require("./SkeletonList.js");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 //# sourceMappingURL=index.js.map

package/lib/commonjs/components/index.js

@@ -261,6 +261,12 @@ Object.defineProperty(exports, "SkeletonContent", {
     return _index35.SkeletonContent;
   }
 });
+Object.defineProperty(exports, "SkeletonList", {
+  enumerable: true,
+  get: function () {
+    return _index35.SkeletonList;
+  }
+});
 Object.defineProperty(exports, "SkeletonListItem", {
   enumerable: true,
   get: function () {

package/lib/module/components/Avatar/Avatar.js

@@ -3,6 +3,7 @@
 import React, { Children, cloneElement, forwardRef, isValidElement, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Easing, Image, StyleSheet, Text, View } from 'react-native';
 import { useTheme } from "../../theme/index.js";
+import { SkeletonContent } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sizeMap = {
   xs: 24,
@@ -64,6 +65,7 @@ const Avatar = /*#__PURE__*/forwardRef((props, ref) => {
     statusPosition = 'bottomRight',
     backgroundColor,
     color,
+    loading = false,
     accessibilityLabel,
     style,
     textStyle,
@@ -84,7 +86,7 @@ const Avatar = /*#__PURE__*/forwardRef((props, ref) => {
   const statusSize = Math.max(8, Math.round(dimension * 0.25));
   const statusBorder = 2;
   const a11yLabel = accessibilityLabel ?? (name ? `${name}'s avatar` : 'Avatar');
-  return /*#__PURE__*/_jsxs(View, {
+  const rendered = /*#__PURE__*/_jsxs(View, {
     ref: ref,
     style: [styles.root, {
       width: dimension,
@@ -114,7 +116,7 @@ const Avatar = /*#__PURE__*/forwardRef((props, ref) => {
       }, textStyle],
       numberOfLines: 1,
       allowFontScaling: false,
-      children: initials
+      children: initials ?? ' '
     }), status ? /*#__PURE__*/_jsx(View, {
       style: [styles.status, statusPosition === 'topRight' ? styles.statusTopRight : styles.statusBottomRight, {
         width: statusSize,
@@ -128,6 +130,14 @@ const Avatar = /*#__PURE__*/forwardRef((props, ref) => {
       pointerEvents: "none"
     }) : null]
   });
+  if (loading) {
+    return /*#__PURE__*/_jsx(SkeletonContent, {
+      loading: true,
+      mode: "auto",
+      children: rendered
+    });
+  }
+  return rendered;
 });
 Avatar.displayName = 'Avatar';
 const styles = StyleSheet.create({

package/lib/module/components/Badge/Badge.js

@@ -3,6 +3,7 @@
 import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
 import { Animated, Easing, StyleSheet, Text, View } from 'react-native';
 import { useTheme } from "../../theme/index.js";
+import { SkeletonContent } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const toneFor = (theme, tone) => {
   switch (tone) {
@@ -97,6 +98,7 @@ const Badge = /*#__PURE__*/forwardRef((props, ref) => {
     tone = 'error',
     size = 'sm',
     invisible = false,
+    loading = false,
     children,
     anchor = 'topRight',
     pulse = false,
@@ -169,23 +171,28 @@ const Badge = /*#__PURE__*/forwardRef((props, ref) => {
       }, textStyle],
       numberOfLines: 1,
       allowFontScaling: false,
-      children: formatted
+      children: formatted ?? ' '
     }) : null
   }) : null;
-  if (children) {
-    return /*#__PURE__*/_jsxs(View, {
-      ref: ref,
-      style: [styles.wrapper, style],
-      testID: testID,
-      children: [children, badgeContent]
-    });
-  }
-  return /*#__PURE__*/_jsx(View, {
+  const rendered = children ? /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    style: [styles.wrapper, style],
+    testID: testID,
+    children: [children, badgeContent]
+  }) : /*#__PURE__*/_jsx(View, {
     ref: ref,
     style: style,
     testID: testID,
     children: badgeContent
   });
+  if (loading) {
+    return /*#__PURE__*/_jsx(SkeletonContent, {
+      loading: true,
+      mode: "auto",
+      children: rendered
+    });
+  }
+  return rendered;
 });
 Badge.displayName = 'Badge';
 const styles = StyleSheet.create({

package/lib/module/components/Card/Card.js

@@ -5,6 +5,7 @@ import { Animated, Image, Pressable, StyleSheet, View } from 'react-native';
 import { useTheme } from "../../theme/index.js";
 import { usePressAnimation } from "../../hooks/usePressAnimation.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { SkeletonContent } from "../Skeleton/index.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const paddingMap = {
   none: 'none',
@@ -27,6 +28,7 @@ const Card = /*#__PURE__*/forwardRef((props, ref) => {
     imageHeight = 160,
     imageAspectRatio,
     imageOverlay,
+    loading = false,
     onPress,
     accessibilityLabel,
     accessibilityHint,
@@ -127,12 +129,13 @@ const Card = /*#__PURE__*/forwardRef((props, ref) => {
       children: innerContent
     })]
   }) : innerContent;
+  let rendered;
   if (isInteractive) {
     const handlePress = event => {
       triggerHaptic('selection');
       onPress?.(event);
     };
-    return /*#__PURE__*/_jsx(Animated.View, {
+    rendered = /*#__PURE__*/_jsx(Animated.View, {
       style: [{
         transform: [{
           scale
@@ -156,16 +159,25 @@ const Card = /*#__PURE__*/forwardRef((props, ref) => {
         children: content
       })
     });
+  } else {
+    rendered = /*#__PURE__*/_jsx(View, {
+      ref: ref,
+      accessibilityLabel: accessibilityLabel,
+      accessibilityHint: accessibilityHint,
+      accessibilityRole: accessibilityRole,
+      testID: testID,
+      style: [containerStyle, style],
+      children: content
+    });
   }
-  return /*#__PURE__*/_jsx(View, {
-    ref: ref,
-    accessibilityLabel: accessibilityLabel,
-    accessibilityHint: accessibilityHint,
-    accessibilityRole: accessibilityRole,
-    testID: testID,
-    style: [containerStyle, style],
-    children: content
-  });
+  if (loading) {
+    return /*#__PURE__*/_jsx(SkeletonContent, {
+      loading: true,
+      mode: "auto",
+      children: rendered
+    });
+  }
+  return rendered;
 });
 Card.displayName = 'Card';
 const buildStyles = theme => StyleSheet.create({

package/lib/module/components/ListItem/ListItem.js

@@ -6,6 +6,7 @@ import { useTheme } from "../../theme/index.js";
 import { usePressAnimation } from "../../hooks/usePressAnimation.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
 import { Swipeable } from "../Swipeable/index.js";
+import { SkeletonContent } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sizeFor = (theme, size) => {
   switch (size) {
@@ -51,6 +52,7 @@ const chevronStyles = StyleSheet.create({
 const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     title,
+    loading = false,
     subtitle,
     description,
     left,
@@ -103,7 +105,7 @@ const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
           color: disabled ? theme.colors.text.disabled : theme.colors.text.primary
         }],
         numberOfLines: 1,
-        children: title
+        children: title ?? ' '
       }), subtitle ? /*#__PURE__*/_jsx(Text, {
         style: [styles.subtitle, {
           fontSize: sz.subtitleSize,
@@ -174,15 +176,20 @@ const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
 
   // Wrap in Swipeable only when at least one side has actions; otherwise keep zero gesture overhead.
   const hasSwipe = leftActions && leftActions.length > 0 || rightActions && rightActions.length > 0;
-  if (hasSwipe) {
-    return /*#__PURE__*/_jsx(Swipeable, {
-      leftActions: leftActions,
-      rightActions: rightActions,
-      accessibilityLabel: a11yLabel,
-      children: rendered
+  const final = hasSwipe ? /*#__PURE__*/_jsx(Swipeable, {
+    leftActions: leftActions,
+    rightActions: rightActions,
+    accessibilityLabel: a11yLabel,
+    children: rendered
+  }) : rendered;
+  if (loading) {
+    return /*#__PURE__*/_jsx(SkeletonContent, {
+      loading: true,
+      mode: "auto",
+      children: final
     });
   }
-  return rendered;
+  return final;
 });
 ListItem.displayName = 'ListItem';
 const buildStyles = theme => StyleSheet.create({

package/lib/module/components/Skeleton/SkeletonContent.js

@@ -108,6 +108,7 @@ const SkeletonContent = ({
   variant = 'shimmer',
   speed = 'normal',
   mode = 'auto',
+  count = 1,
   style,
   testID
 }) => {
@@ -116,13 +117,18 @@ const SkeletonContent = ({
       children: children
     });
   }
+  const repeated = count > 1 ? Array.from({
+    length: count
+  }, (_, i) => /*#__PURE__*/_jsx(React.Fragment, {
+    children: children
+  }, `sk-rep-${i}`)) : children;
   if (mode === 'block') {
     return /*#__PURE__*/_jsx(BlockSkeleton, {
       style: style,
       testID: testID,
       variant: variant,
       speed: speed,
-      children: children
+      children: repeated
     });
   }
   return /*#__PURE__*/_jsx(View, {
@@ -132,7 +138,7 @@ const SkeletonContent = ({
     accessibilityLabel: "Loading",
     accessibilityRole: "progressbar",
     accessibilityLiveRegion: "polite",
-    children: skeletonizeNode(children, variant, speed)
+    children: skeletonizeNode(repeated, variant, speed)
   });
 };
 SkeletonContent.displayName = 'SkeletonContent';

package/lib/module/components/Skeleton/SkeletonList.js

@@ -0,0 +1,77 @@
+"use strict";
+
+import React from 'react';
+import { FlatList, View } from 'react-native';
+import { SkeletonContent } from "./SkeletonContent.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Drop-in FlatList replacement that renders `placeholderCount` skeleton rows while
+ * `loading` is true, then transitions to a real `<FlatList>` of `data` once loaded.
+ *
+ * Solves the "FlatList with empty data renders nothing" problem so consumer screens
+ * don't have to maintain a separate placeholder branch.
+ *
+ * @example
+ * <SkeletonList
+ *   loading={isLoading}
+ *   data={sites}
+ *   renderItem={({ item }) => <SiteCard item={item} />}
+ *   renderPlaceholder={() => <SiteCard loading />}
+ *   placeholderCount={3}
+ *   horizontal
+ * />
+ */
+function SkeletonListInner(props) {
+  const {
+    loading,
+    data,
+    renderItem,
+    renderPlaceholder,
+    placeholderCount = 3,
+    variant,
+    speed,
+    placeholderContainerStyle,
+    horizontal,
+    contentContainerStyle,
+    style,
+    testID,
+    ...rest
+  } = props;
+  if (loading) {
+    const slots = Array.from({
+      length: Math.max(0, placeholderCount)
+    }, (_, index) => /*#__PURE__*/_jsx(React.Fragment, {
+      children: renderPlaceholder ? renderPlaceholder(index) : null
+    }, `sk-list-${index}`));
+    return /*#__PURE__*/_jsx(SkeletonContent, {
+      loading: true,
+      variant: variant,
+      speed: speed,
+      style: style,
+      testID: testID,
+      children: /*#__PURE__*/_jsx(View, {
+        style: [horizontal ? styles.row : styles.column, placeholderContainerStyle],
+        children: slots
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(FlatList, {
+    data: data ?? [],
+    renderItem: renderItem,
+    horizontal: horizontal,
+    contentContainerStyle: contentContainerStyle,
+    style: style,
+    testID: testID,
+    ...rest
+  });
+}
+const styles = {
+  row: {
+    flexDirection: 'row'
+  },
+  column: {
+    flexDirection: 'column'
+  }
+};
+export const SkeletonList = SkeletonListInner;
+//# sourceMappingURL=SkeletonList.js.map

package/lib/module/components/Skeleton/index.js

@@ -2,4 +2,5 @@
 
 export { Skeleton, SkeletonCircle, SkeletonText, SkeletonAvatar, SkeletonCard, SkeletonListItem, default } from "./Skeleton.js";
 export { SkeletonContent } from "./SkeletonContent.js";
+export { SkeletonList } from "./SkeletonList.js";
 //# sourceMappingURL=index.js.map

package/lib/module/components/index.js

@@ -36,7 +36,7 @@ export { SearchBar } from "./SearchBar/index.js";
 export { SegmentedControl } from "./SegmentedControl/index.js";
 export { Select } from "./Select/index.js";
 export { Stepper } from "./Stepper/index.js";
-export { Skeleton, SkeletonAvatar, SkeletonCard, SkeletonCircle, SkeletonContent, SkeletonListItem, SkeletonText } from "./Skeleton/index.js";
+export { Skeleton, SkeletonAvatar, SkeletonCard, SkeletonCircle, SkeletonContent, SkeletonList, SkeletonListItem, SkeletonText } from "./Skeleton/index.js";
 export { Slider } from "./Slider/index.js";
 export { Swipeable } from "./Swipeable/index.js";
 export { Switch } from "./Switch/index.js";

package/lib/typescript/commonjs/components/Avatar/Avatar.d.ts

@@ -14,6 +14,12 @@ export interface AvatarProps {
     statusPosition?: AvatarStatusPosition;
     backgroundColor?: string;
     color?: string;
+    /**
+     * When true, renders the component as a skeleton placeholder via SkeletonContent's auto walker.
+     * Component still renders its normal layout — the walker replaces Text/Image/sized View leaves
+     * with shimmer blocks. Use this when the data driving the component is still being fetched.
+     */
+    loading?: boolean;
     accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;
     textStyle?: StyleProp<TextStyle>;

package/lib/typescript/commonjs/components/Badge/Badge.d.ts

@@ -12,6 +12,12 @@ export interface BadgeProps {
     tone?: BadgeTone;
     size?: BadgeSize;
     invisible?: boolean;
+    /**
+     * When true, renders the component as a skeleton placeholder via SkeletonContent's auto walker.
+     * Component still renders its normal layout — the walker replaces Text/Image/sized View leaves
+     * with shimmer blocks. Use this when the data driving the component is still being fetched.
+     */
+    loading?: boolean;
     children?: React.ReactNode;
     anchor?: BadgeAnchor;
     pulse?: boolean;

package/lib/typescript/commonjs/components/Card/Card.d.ts

@@ -18,6 +18,12 @@ export interface CardProps extends Omit<PressableProps, 'style' | 'children'> {
     imageHeight?: number;
     imageAspectRatio?: number;
     imageOverlay?: React.ReactNode;
+    /**
+     * When true, renders the component as a skeleton placeholder via SkeletonContent's auto walker.
+     * Component still renders its normal layout — the walker replaces Text/Image/sized View leaves
+     * with shimmer blocks. Use this when the data driving the component is still being fetched.
+     */
+    loading?: boolean;
     onPress?: (event: GestureResponderEvent) => void;
     accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;

package/lib/typescript/commonjs/components/ListItem/ListItem.d.ts

@@ -5,6 +5,12 @@ import type { SwipeableAction } from '../Swipeable';
 export type ListItemSize = 'sm' | 'md' | 'lg';
 export interface ListItemProps {
     title: string;
+    /**
+     * When true, renders the component as a skeleton placeholder via SkeletonContent's auto walker.
+     * Component still renders its normal layout — the walker replaces Text/Image/sized View leaves
+     * with shimmer blocks. Use this when the data driving the component is still being fetched.
+     */
+    loading?: boolean;
     subtitle?: string;
     description?: string;
     left?: React.ReactNode;

package/lib/typescript/commonjs/components/Skeleton/SkeletonContent.d.ts

@@ -20,6 +20,12 @@ export interface SkeletonContentProps {
      *   cannot inspect.
      */
     mode?: SkeletonContentMode;
+    /**
+     * Repeat `children` this many times while loading. Useful for list layouts where the
+     * placeholder shape should appear N times (e.g. 3 site cards, 5 list rows). Ignored when
+     * `loading` is false. Default: `1`.
+     */
+    count?: number;
     style?: StyleProp<ViewStyle>;
     testID?: string;
 }

package/lib/typescript/commonjs/components/Skeleton/SkeletonList.d.ts

@@ -0,0 +1,27 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { FlatListProps, StyleProp, ViewStyle } from 'react-native';
+import type { SkeletonSpeed, SkeletonVariant } from './Skeleton';
+export interface SkeletonListProps<ItemT> extends Omit<FlatListProps<ItemT>, 'data' | 'renderItem'> {
+    /** Whether the list is in its initial loading state. */
+    loading: boolean;
+    /** The data to render once loading is complete. */
+    data: readonly ItemT[] | null | undefined;
+    /** Renders a single real item once data is available. */
+    renderItem: FlatListProps<ItemT>['renderItem'];
+    /**
+     * Renders one placeholder row. Index is provided so callers may vary
+     * placeholder shape per slot if desired. Defaults to `null`.
+     */
+    renderPlaceholder?: (index: number) => ReactNode;
+    /** How many placeholder rows to render while loading. Default: 3. */
+    placeholderCount?: number;
+    /** Animation style — same as Skeleton. */
+    variant?: SkeletonVariant;
+    /** Animation speed — same as Skeleton. */
+    speed?: SkeletonSpeed;
+    /** Style applied to the wrapper View around the placeholders. */
+    placeholderContainerStyle?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+export declare const SkeletonList: <ItemT>(props: SkeletonListProps<ItemT>) => ReactElement;
+//# sourceMappingURL=SkeletonList.d.ts.map

package/lib/typescript/commonjs/components/Skeleton/index.d.ts

@@ -2,4 +2,6 @@ export { Skeleton, SkeletonCircle, SkeletonText, SkeletonAvatar, SkeletonCard, S
 export type { SkeletonProps, SkeletonCircleProps, SkeletonTextProps, SkeletonAvatarProps, SkeletonCardProps, SkeletonListItemProps, SkeletonVariant, SkeletonSpeed, SkeletonRadius, SkeletonWidth, SkeletonAvatarSize } from './Skeleton';
 export { SkeletonContent } from './SkeletonContent';
 export type { SkeletonContentProps, SkeletonContentMode } from './SkeletonContent';
+export { SkeletonList } from './SkeletonList';
+export type { SkeletonListProps } from './SkeletonList';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/components/index.d.ts

@@ -70,8 +70,8 @@ export { Select } from './Select';
 export type { SelectProps, SelectOption, SelectSize } from './Select';
 export { Stepper } from './Stepper';
 export type { StepperProps, StepperVariant, StepperStep, StepperTone } from './Stepper';
-export { Skeleton, SkeletonAvatar, SkeletonCard, SkeletonCircle, SkeletonContent, SkeletonListItem, SkeletonText } from './Skeleton';
-export type { SkeletonProps, SkeletonAvatarProps, SkeletonCardProps, SkeletonCircleProps, SkeletonContentMode, SkeletonContentProps, SkeletonListItemProps, SkeletonTextProps, SkeletonVariant, SkeletonSpeed } from './Skeleton';
+export { Skeleton, SkeletonAvatar, SkeletonCard, SkeletonCircle, SkeletonContent, SkeletonList, SkeletonListItem, SkeletonText } from './Skeleton';
+export type { SkeletonProps, SkeletonAvatarProps, SkeletonCardProps, SkeletonCircleProps, SkeletonContentMode, SkeletonContentProps, SkeletonListItemProps, SkeletonListProps, SkeletonTextProps, SkeletonVariant, SkeletonSpeed } from './Skeleton';
 export { Slider } from './Slider';
 export type { SliderProps, SliderTone, SliderSize } from './Slider';
 export { Swipeable } from './Swipeable';

package/lib/typescript/module/components/Avatar/Avatar.d.ts

@@ -14,6 +14,12 @@ export interface AvatarProps {
     statusPosition?: AvatarStatusPosition;
     backgroundColor?: string;
     color?: string;
+    /**
+     * When true, renders the component as a skeleton placeholder via SkeletonContent's auto walker.
+     * Component still renders its normal layout — the walker replaces Text/Image/sized View leaves
+     * with shimmer blocks. Use this when the data driving the component is still being fetched.
+     */
+    loading?: boolean;
     accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;
     textStyle?: StyleProp<TextStyle>;

package/lib/typescript/module/components/Badge/Badge.d.ts

@@ -12,6 +12,12 @@ export interface BadgeProps {
     tone?: BadgeTone;
     size?: BadgeSize;
     invisible?: boolean;
+    /**
+     * When true, renders the component as a skeleton placeholder via SkeletonContent's auto walker.
+     * Component still renders its normal layout — the walker replaces Text/Image/sized View leaves
+     * with shimmer blocks. Use this when the data driving the component is still being fetched.
+     */
+    loading?: boolean;
     children?: React.ReactNode;
     anchor?: BadgeAnchor;
     pulse?: boolean;

package/lib/typescript/module/components/Card/Card.d.ts

@@ -18,6 +18,12 @@ export interface CardProps extends Omit<PressableProps, 'style' | 'children'> {
     imageHeight?: number;
     imageAspectRatio?: number;
     imageOverlay?: React.ReactNode;
+    /**
+     * When true, renders the component as a skeleton placeholder via SkeletonContent's auto walker.
+     * Component still renders its normal layout — the walker replaces Text/Image/sized View leaves
+     * with shimmer blocks. Use this when the data driving the component is still being fetched.
+     */
+    loading?: boolean;
     onPress?: (event: GestureResponderEvent) => void;
     accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;

package/lib/typescript/module/components/ListItem/ListItem.d.ts

@@ -5,6 +5,12 @@ import type { SwipeableAction } from '../Swipeable';
 export type ListItemSize = 'sm' | 'md' | 'lg';
 export interface ListItemProps {
     title: string;
+    /**
+     * When true, renders the component as a skeleton placeholder via SkeletonContent's auto walker.
+     * Component still renders its normal layout — the walker replaces Text/Image/sized View leaves
+     * with shimmer blocks. Use this when the data driving the component is still being fetched.
+     */
+    loading?: boolean;
     subtitle?: string;
     description?: string;
     left?: React.ReactNode;

package/lib/typescript/module/components/Skeleton/SkeletonContent.d.ts

@@ -20,6 +20,12 @@ export interface SkeletonContentProps {
      *   cannot inspect.
      */
     mode?: SkeletonContentMode;
+    /**
+     * Repeat `children` this many times while loading. Useful for list layouts where the
+     * placeholder shape should appear N times (e.g. 3 site cards, 5 list rows). Ignored when
+     * `loading` is false. Default: `1`.
+     */
+    count?: number;
     style?: StyleProp<ViewStyle>;
     testID?: string;
 }

package/lib/typescript/module/components/Skeleton/SkeletonList.d.ts

@@ -0,0 +1,27 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { FlatListProps, StyleProp, ViewStyle } from 'react-native';
+import type { SkeletonSpeed, SkeletonVariant } from './Skeleton';
+export interface SkeletonListProps<ItemT> extends Omit<FlatListProps<ItemT>, 'data' | 'renderItem'> {
+    /** Whether the list is in its initial loading state. */
+    loading: boolean;
+    /** The data to render once loading is complete. */
+    data: readonly ItemT[] | null | undefined;
+    /** Renders a single real item once data is available. */
+    renderItem: FlatListProps<ItemT>['renderItem'];
+    /**
+     * Renders one placeholder row. Index is provided so callers may vary
+     * placeholder shape per slot if desired. Defaults to `null`.
+     */
+    renderPlaceholder?: (index: number) => ReactNode;
+    /** How many placeholder rows to render while loading. Default: 3. */
+    placeholderCount?: number;
+    /** Animation style — same as Skeleton. */
+    variant?: SkeletonVariant;
+    /** Animation speed — same as Skeleton. */
+    speed?: SkeletonSpeed;
+    /** Style applied to the wrapper View around the placeholders. */
+    placeholderContainerStyle?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+export declare const SkeletonList: <ItemT>(props: SkeletonListProps<ItemT>) => ReactElement;
+//# sourceMappingURL=SkeletonList.d.ts.map

package/lib/typescript/module/components/Skeleton/index.d.ts

@@ -2,4 +2,6 @@ export { Skeleton, SkeletonCircle, SkeletonText, SkeletonAvatar, SkeletonCard, S
 export type { SkeletonProps, SkeletonCircleProps, SkeletonTextProps, SkeletonAvatarProps, SkeletonCardProps, SkeletonListItemProps, SkeletonVariant, SkeletonSpeed, SkeletonRadius, SkeletonWidth, SkeletonAvatarSize } from './Skeleton';
 export { SkeletonContent } from './SkeletonContent';
 export type { SkeletonContentProps, SkeletonContentMode } from './SkeletonContent';
+export { SkeletonList } from './SkeletonList';
+export type { SkeletonListProps } from './SkeletonList';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/components/index.d.ts

@@ -70,8 +70,8 @@ export { Select } from './Select';
 export type { SelectProps, SelectOption, SelectSize } from './Select';
 export { Stepper } from './Stepper';
 export type { StepperProps, StepperVariant, StepperStep, StepperTone } from './Stepper';
-export { Skeleton, SkeletonAvatar, SkeletonCard, SkeletonCircle, SkeletonContent, SkeletonListItem, SkeletonText } from './Skeleton';
-export type { SkeletonProps, SkeletonAvatarProps, SkeletonCardProps, SkeletonCircleProps, SkeletonContentMode, SkeletonContentProps, SkeletonListItemProps, SkeletonTextProps, SkeletonVariant, SkeletonSpeed } from './Skeleton';
+export { Skeleton, SkeletonAvatar, SkeletonCard, SkeletonCircle, SkeletonContent, SkeletonList, SkeletonListItem, SkeletonText } from './Skeleton';
+export type { SkeletonProps, SkeletonAvatarProps, SkeletonCardProps, SkeletonCircleProps, SkeletonContentMode, SkeletonContentProps, SkeletonListItemProps, SkeletonListProps, SkeletonTextProps, SkeletonVariant, SkeletonSpeed } from './Skeleton';
 export { Slider } from './Slider';
 export type { SliderProps, SliderTone, SliderSize } from './Slider';
 export { Swipeable } from './Swipeable';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority-technologies/mobile",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Beautiful, animated, accessible React Native components plus API/auth/logging/network/storage utilities for Webority projects.",
   "keywords": [
     "react-native",