@umituz/react-native-loading 1.0.0

package/lib/index.js

@@ -0,0 +1,86 @@
+/**
+ * Loading Domain - Barrel Export
+ *
+ * Public API for the loading domain.
+ * Provides consistent loading states and animations across all apps.
+ *
+ * Features:
+ * - Breathing animation loading state (meditation-inspired)
+ * - Skeleton loaders with shimmer effect
+ * - Loading state management hooks
+ * - App-specific emoji presets
+ * - Configurable sizes and patterns
+ *
+ * Usage:
+ * ```tsx
+ * import {
+ *   LoadingState,
+ *   SkeletonLoader,
+ *   useLoading,
+ *   LOADING_EMOJIS,
+ * } from '@umituz/react-native-loading';
+ *
+ * // Basic loading state
+ * const MyScreen = () => {
+ *   const { isLoading, startLoading, stopLoading } = useLoading();
+ *
+ *   return (
+ *     <View>
+ *       {isLoading ? (
+ *         <LoadingState message="Loading..." />
+ *       ) : (
+ *         <Content />
+ *       )}
+ *     </View>
+ *   );
+ * };
+ *
+ * // Skeleton loader for lists
+ * const ListScreen = () => {
+ *   const [data, setData] = useState([]);
+ *   const { isLoading } = useLoading();
+ *
+ *   return (
+ *     <View>
+ *       {isLoading ? (
+ *         <SkeletonLoader pattern="list" count={5} />
+ *       ) : (
+ *         <FlatList data={data} ... />
+ *       )}
+ *     </View>
+ *   );
+ * };
+ *
+ * // With async wrapper
+ * const DataScreen = () => {
+ *   const { isLoading, loadingMessage, withLoading } = useLoading();
+ *
+ *   const loadData = () => withLoading(
+ *     fetchData(),
+ *     'Loading data...'
+ *   );
+ *
+ *   return (
+ *     <View>
+ *       {isLoading && <LoadingState message={loadingMessage} />}
+ *       <Button onPress={loadData}>Load</Button>
+ *     </View>
+ *   );
+ * };
+ *
+ * // Custom emoji per app
+ * const FitnessLoadingScreen = () => (
+ *   <LoadingState
+ *     emoji={LOADING_EMOJIS.fitness}
+ *     message="Loading workouts..."
+ *   />
+ * );
+ * ```
+ */
+export { SIZE_CONFIGS, LOADING_EMOJIS, ANIMATION_CONFIGS, SKELETON_PATTERNS, LoadingUtils, LOADING_CONSTANTS, } from './domain/entities/Loading';
+// Presentation Components
+export { LoadingState, } from './presentation/components/LoadingState';
+export { SkeletonLoader, } from './presentation/components/SkeletonLoader';
+// Presentation Hooks
+export { useLoading, useSimpleLoading, } from './presentation/hooks/useLoading';
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8EG;AAaH,OAAO,EACL,YAAY,EACZ,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,YAAY,EACZ,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AAEnC,0BAA0B;AAC1B,OAAO,EACL,YAAY,GAEb,MAAM,wCAAwC,CAAC;AAEhD,OAAO,EACL,cAAc,GAEf,MAAM,0CAA0C,CAAC;AAElD,qBAAqB;AACrB,OAAO,EACL,UAAU,EACV,gBAAgB,GAEjB,MAAM,iCAAiC,CAAC"}

package/lib/presentation/components/LoadingState.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Loading Domain - LoadingState Component
+ *
+ * Universal loading component with breathing animation.
+ * Provides consistent, calm loading UX across all apps.
+ *
+ * Adapted from meditation_timer app's LoadingState component.
+ *
+ * @domain loading
+ * @layer presentation/components
+ */
+import React from 'react';
+import { type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import type { LoadingSize } from '../../domain/entities/Loading';
+/**
+ * LoadingState component props
+ */
+export interface LoadingStateProps {
+    /** Loading emoji - default: ⌛ (customizable per app) */
+    emoji?: string;
+    /** Loading message (optional) */
+    message?: string;
+    /** Size: small (inline), medium (section), large (full screen) */
+    size?: LoadingSize;
+    /** Full screen layout vs inline */
+    fullScreen?: boolean;
+    /** Custom container style */
+    style?: StyleProp<ViewStyle>;
+    /** Custom message style */
+    messageStyle?: StyleProp<TextStyle>;
+}
+/**
+ * LoadingState Component
+ *
+ * Universal loading indicator with breathing animation.
+ * Creates a calm, mindful loading experience.
+ *
+ * USAGE:
+ * ```typescript
+ * // Basic usage
+ * <LoadingState />
+ *
+ * // With message
+ * <LoadingState message="Loading data..." size="medium" />
+ *
+ * // Full screen
+ * <LoadingState fullScreen message="Please wait..." />
+ *
+ * // Custom emoji (per app theme)
+ * <LoadingState emoji="🧘" message="Loading meditations..." />
+ *
+ * // Inline loading
+ * <LoadingState size="small" />
+ * ```
+ */
+export declare const LoadingState: React.FC<LoadingStateProps>;
+//# sourceMappingURL=LoadingState.d.ts.map

package/lib/presentation/components/LoadingState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingState.d.ts","sourceRoot":"","sources":["../../../src/presentation/components/LoadingState.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAsC,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAElH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAOjE;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kEAAkE;IAClE,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,mCAAmC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,2BAA2B;IAC3B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACrC;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4EpD,CAAC"}

package/lib/presentation/components/LoadingState.js

@@ -0,0 +1,110 @@
+/**
+ * Loading Domain - LoadingState Component
+ *
+ * Universal loading component with breathing animation.
+ * Provides consistent, calm loading UX across all apps.
+ *
+ * Adapted from meditation_timer app's LoadingState component.
+ *
+ * @domain loading
+ * @layer presentation/components
+ */
+import React, { useEffect, useRef } from 'react';
+import { View, StyleSheet, Animated, Easing } from 'react-native';
+import { useAppDesignTokens, AtomicText } from '@umituz/react-native-design-system';
+import { SIZE_CONFIGS, LOADING_EMOJIS, } from '../../domain/entities/Loading';
+/**
+ * LoadingState Component
+ *
+ * Universal loading indicator with breathing animation.
+ * Creates a calm, mindful loading experience.
+ *
+ * USAGE:
+ * ```typescript
+ * // Basic usage
+ * <LoadingState />
+ *
+ * // With message
+ * <LoadingState message="Loading data..." size="medium" />
+ *
+ * // Full screen
+ * <LoadingState fullScreen message="Please wait..." />
+ *
+ * // Custom emoji (per app theme)
+ * <LoadingState emoji="🧘" message="Loading meditations..." />
+ *
+ * // Inline loading
+ * <LoadingState size="small" />
+ * ```
+ */
+export const LoadingState = ({ emoji = LOADING_EMOJIS.default, message, size = 'large', fullScreen = false, style, messageStyle, }) => {
+    const tokens = useAppDesignTokens();
+    const config = SIZE_CONFIGS[size];
+    // Animated value for emoji pulse (breathing effect)
+    const scaleAnim = useRef(new Animated.Value(1)).current;
+    useEffect(() => {
+        // Meditation breathing animation: 2 second cycle (inhale/exhale)
+        const breathingAnimation = Animated.loop(Animated.sequence([
+            // Inhale - expand
+            Animated.timing(scaleAnim, {
+                toValue: 1.15,
+                duration: 1000,
+                easing: Easing.inOut(Easing.ease),
+                useNativeDriver: true,
+            }),
+            // Exhale - contract
+            Animated.timing(scaleAnim, {
+                toValue: 1,
+                duration: 1000,
+                easing: Easing.inOut(Easing.ease),
+                useNativeDriver: true,
+            }),
+        ]));
+        breathingAnimation.start();
+        return () => {
+            breathingAnimation.stop();
+        };
+    }, [scaleAnim]);
+    return (<View style={[
+            styles.container,
+            fullScreen && styles.fullScreen,
+            { gap: config.spacing },
+            style,
+        ]}>
+      {/* Animated Emoji with breathing pulse */}
+      <Animated.Text style={[
+            styles.emoji,
+            {
+                fontSize: config.emojiSize,
+                transform: [{ scale: scaleAnim }],
+            },
+        ]}>
+        {emoji}
+      </Animated.Text>
+
+      {/* Optional Loading Message */}
+      {config.showMessage && message && (<AtomicText type="bodySmall" color="secondary" style={[styles.message, messageStyle]}>
+          {message}
+        </AtomicText>)}
+    </View>);
+};
+const styles = StyleSheet.create({
+    container: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingVertical: 20,
+    },
+    fullScreen: {
+        flex: 1,
+        paddingVertical: 60,
+    },
+    emoji: {
+        fontFamily: 'System', // Emoji font
+    },
+    message: {
+        textAlign: 'center',
+        opacity: 0.7,
+        paddingHorizontal: 32,
+    },
+});
+//# sourceMappingURL=LoadingState.js.map

package/lib/presentation/components/LoadingState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingState.js","sourceRoot":"","sources":["../../../src/presentation/components/LoadingState.tsx"],"names":[],"mappings":"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"}

package/lib/presentation/components/SkeletonLoader.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Loading Domain - SkeletonLoader Component
+ *
+ * Skeleton placeholder loader with shimmer animation.
+ * Provides visual feedback during content loading.
+ *
+ * @domain loading
+ * @layer presentation/components
+ */
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { SkeletonPattern, SkeletonConfig } from '../../domain/entities/Loading';
+/**
+ * SkeletonLoader component props
+ */
+export interface SkeletonLoaderProps {
+    /** Skeleton pattern preset */
+    pattern?: SkeletonPattern;
+    /** Custom skeleton configurations */
+    custom?: SkeletonConfig[];
+    /** Number of skeleton items to render */
+    count?: number;
+    /** Custom container style */
+    style?: StyleProp<ViewStyle>;
+    /** Disable shimmer animation */
+    disableAnimation?: boolean;
+}
+/**
+ * SkeletonLoader Component
+ *
+ * Renders skeleton placeholders with shimmer animation.
+ * Provides visual feedback while content is loading.
+ *
+ * USAGE:
+ * ```typescript
+ * // List skeleton (default)
+ * <SkeletonLoader pattern="list" count={5} />
+ *
+ * // Card skeleton
+ * <SkeletonLoader pattern="card" count={3} />
+ *
+ * // Profile skeleton
+ * <SkeletonLoader pattern="profile" />
+ *
+ * // Text skeleton
+ * <SkeletonLoader pattern="text" count={3} />
+ *
+ * // Custom skeleton
+ * <SkeletonLoader
+ *   pattern="custom"
+ *   custom={[
+ *     { width: 100, height: 100, borderRadius: 50 },
+ *     { width: '80%', height: 20, borderRadius: 4 },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const SkeletonLoader: React.FC<SkeletonLoaderProps>;
+//# sourceMappingURL=SkeletonLoader.d.ts.map

package/lib/presentation/components/SkeletonLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonLoader.d.ts","sourceRoot":"","sources":["../../../src/presentation/components/SkeletonLoader.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAA8B,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE1F,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAMrF;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,8BAA8B;IAC9B,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,qCAAqC;IACrC,MAAM,CAAC,EAAE,cAAc,EAAE,CAAC;IAC1B,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,gCAAgC;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAiFxD,CAAC"}

package/lib/presentation/components/SkeletonLoader.js

@@ -0,0 +1,112 @@
+/**
+ * Loading Domain - SkeletonLoader Component
+ *
+ * Skeleton placeholder loader with shimmer animation.
+ * Provides visual feedback during content loading.
+ *
+ * @domain loading
+ * @layer presentation/components
+ */
+import React, { useEffect, useRef } from 'react';
+import { View, StyleSheet, Animated } from 'react-native';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
+import { SKELETON_PATTERNS, LOADING_CONSTANTS, } from '../../domain/entities/Loading';
+/**
+ * SkeletonLoader Component
+ *
+ * Renders skeleton placeholders with shimmer animation.
+ * Provides visual feedback while content is loading.
+ *
+ * USAGE:
+ * ```typescript
+ * // List skeleton (default)
+ * <SkeletonLoader pattern="list" count={5} />
+ *
+ * // Card skeleton
+ * <SkeletonLoader pattern="card" count={3} />
+ *
+ * // Profile skeleton
+ * <SkeletonLoader pattern="profile" />
+ *
+ * // Text skeleton
+ * <SkeletonLoader pattern="text" count={3} />
+ *
+ * // Custom skeleton
+ * <SkeletonLoader
+ *   pattern="custom"
+ *   custom={[
+ *     { width: 100, height: 100, borderRadius: 50 },
+ *     { width: '80%', height: 20, borderRadius: 4 },
+ *   ]}
+ * />
+ * ```
+ */
+export const SkeletonLoader = ({ pattern = 'list', custom, count = 1, style, disableAnimation = false, }) => {
+    const tokens = useAppDesignTokens();
+    // Get skeleton config
+    const skeletonConfigs = pattern === 'custom' && custom
+        ? custom
+        : SKELETON_PATTERNS[pattern];
+    // Animated value for shimmer effect
+    const shimmerAnim = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        if (disableAnimation)
+            return;
+        // Shimmer animation: 1.2 second cycle
+        const shimmerAnimation = Animated.loop(Animated.sequence([
+            Animated.timing(shimmerAnim, {
+                toValue: 1,
+                duration: LOADING_CONSTANTS.SKELETON_SHIMMER_DURATION,
+                useNativeDriver: false, // backgroundColor animation requires false
+            }),
+            Animated.timing(shimmerAnim, {
+                toValue: 0,
+                duration: 0,
+                useNativeDriver: false,
+            }),
+        ]));
+        shimmerAnimation.start();
+        return () => {
+            shimmerAnimation.stop();
+        };
+    }, [shimmerAnim, disableAnimation]);
+    // Interpolate shimmer animation to background color
+    const backgroundColor = shimmerAnim.interpolate({
+        inputRange: [0, 0.5, 1],
+        outputRange: [
+            tokens.colors.surfaceSecondary,
+            tokens.colors.border,
+            tokens.colors.surfaceSecondary,
+        ],
+    });
+    // Render skeleton items
+    const renderSkeletonItem = (index) => (<View key={`skeleton-group-${index}`} style={styles.skeletonGroup}>
+      {skeletonConfigs.map((config, configIndex) => (<Animated.View key={`skeleton-${index}-${configIndex}`} style={[
+                styles.skeleton,
+                {
+                    width: config.width,
+                    height: config.height,
+                    borderRadius: config.borderRadius,
+                    marginBottom: config.marginBottom,
+                    backgroundColor: disableAnimation
+                        ? tokens.colors.surfaceSecondary
+                        : backgroundColor,
+                },
+            ]}/>))}
+    </View>);
+    return (<View style={[styles.container, style]}>
+      {Array.from({ length: count }).map((_, index) => renderSkeletonItem(index))}
+    </View>);
+};
+const styles = StyleSheet.create({
+    container: {
+        width: '100%',
+    },
+    skeletonGroup: {
+        width: '100%',
+    },
+    skeleton: {
+        overflow: 'hidden',
+    },
+});
+//# sourceMappingURL=SkeletonLoader.js.map

package/lib/presentation/components/SkeletonLoader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonLoader.js","sourceRoot":"","sources":["../../../src/presentation/components/SkeletonLoader.tsx"],"names":[],"mappings":"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"}

package/lib/presentation/hooks/useLoading.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Loading Domain - useLoading Hook
+ *
+ * React hook for managing loading states.
+ * Provides consistent loading state management across components.
+ *
+ * @domain loading
+ * @layer presentation/hooks
+ */
+import type { LoadingType } from '../../domain/entities/Loading';
+/**
+ * useLoading hook return type
+ */
+export interface UseLoadingReturn {
+    isLoading: boolean;
+    loadingMessage: string | null;
+    loadingType: LoadingType;
+    startLoading: (message?: string, type?: LoadingType) => void;
+    stopLoading: () => void;
+    setLoadingMessage: (message: string | null) => void;
+    setLoadingType: (type: LoadingType) => void;
+    withLoading: <T>(asyncFn: Promise<T>, message?: string, type?: LoadingType) => Promise<T>;
+}
+/**
+ * useLoading hook for loading state management
+ *
+ * USAGE:
+ * ```typescript
+ * const {
+ *   isLoading,
+ *   loadingMessage,
+ *   startLoading,
+ *   stopLoading,
+ *   withLoading,
+ * } = useLoading();
+ *
+ * // Manual control
+ * const handleSave = async () => {
+ *   startLoading('Saving data...');
+ *   try {
+ *     await saveData();
+ *   } finally {
+ *     stopLoading();
+ *   }
+ * };
+ *
+ * // Automatic wrapper
+ * const handleLoad = () => withLoading(
+ *   loadData(),
+ *   'Loading data...'
+ * );
+ *
+ * // In render
+ * {isLoading && <LoadingState message={loadingMessage} />}
+ * ```
+ */
+export declare const useLoading: () => UseLoadingReturn;
+/**
+ * Convenience hook for simple loading state (no message)
+ */
+export declare const useSimpleLoading: () => {
+    isLoading: boolean;
+    startLoading: () => void;
+    stopLoading: () => void;
+    withLoading: <T>(asyncFn: Promise<T>) => Promise<T>;
+};
+//# sourceMappingURL=useLoading.d.ts.map

package/lib/presentation/hooks/useLoading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLoading.d.ts","sourceRoot":"","sources":["../../../src/presentation/hooks/useLoading.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAEjE;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAE/B,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,WAAW,EAAE,WAAW,CAAC;IAGzB,YAAY,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,WAAW,KAAK,IAAI,CAAC;IAC7D,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,iBAAiB,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACpD,cAAc,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAG5C,WAAW,EAAE,CAAC,CAAC,EACb,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EACnB,OAAO,CAAC,EAAE,MAAM,EAChB,IAAI,CAAC,EAAE,WAAW,KACf,OAAO,CAAC,CAAC,CAAC,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,UAAU,QAAO,gBAwE7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;kBAIlB,CAAC,WAAY,OAAO,CAAC,CAAC,CAAC,KAAG,OAAO,CAAC,CAAC,CAAC;CAmB9C,CAAC"}

package/lib/presentation/hooks/useLoading.js

@@ -0,0 +1,124 @@
+/**
+ * Loading Domain - useLoading Hook
+ *
+ * React hook for managing loading states.
+ * Provides consistent loading state management across components.
+ *
+ * @domain loading
+ * @layer presentation/hooks
+ */
+import { useState, useCallback } from 'react';
+/**
+ * useLoading hook for loading state management
+ *
+ * USAGE:
+ * ```typescript
+ * const {
+ *   isLoading,
+ *   loadingMessage,
+ *   startLoading,
+ *   stopLoading,
+ *   withLoading,
+ * } = useLoading();
+ *
+ * // Manual control
+ * const handleSave = async () => {
+ *   startLoading('Saving data...');
+ *   try {
+ *     await saveData();
+ *   } finally {
+ *     stopLoading();
+ *   }
+ * };
+ *
+ * // Automatic wrapper
+ * const handleLoad = () => withLoading(
+ *   loadData(),
+ *   'Loading data...'
+ * );
+ *
+ * // In render
+ * {isLoading && <LoadingState message={loadingMessage} />}
+ * ```
+ */
+export const useLoading = () => {
+    const [isLoading, setIsLoading] = useState(false);
+    const [loadingMessage, setLoadingMessage] = useState(null);
+    const [loadingType, setLoadingType] = useState('pulse');
+    /**
+     * Start loading state
+     */
+    const startLoading = useCallback((message, type = 'pulse') => {
+        setIsLoading(true);
+        setLoadingMessage(message || null);
+        setLoadingType(type);
+    }, []);
+    /**
+     * Stop loading state
+     */
+    const stopLoading = useCallback(() => {
+        setIsLoading(false);
+        setLoadingMessage(null);
+    }, []);
+    /**
+     * Update loading message
+     */
+    const updateLoadingMessage = useCallback((message) => {
+        setLoadingMessage(message);
+    }, []);
+    /**
+     * Update loading type
+     */
+    const updateLoadingType = useCallback((type) => {
+        setLoadingType(type);
+    }, []);
+    /**
+     * Async wrapper that automatically manages loading state
+     */
+    const withLoading = useCallback(async (asyncFn, message, type = 'pulse') => {
+        startLoading(message, type);
+        try {
+            const result = await asyncFn;
+            return result;
+        }
+        finally {
+            stopLoading();
+        }
+    }, [startLoading, stopLoading]);
+    return {
+        // Loading state
+        isLoading,
+        loadingMessage,
+        loadingType,
+        // Actions
+        startLoading,
+        stopLoading,
+        setLoadingMessage: updateLoadingMessage,
+        setLoadingType: updateLoadingType,
+        // Async wrapper
+        withLoading,
+    };
+};
+/**
+ * Convenience hook for simple loading state (no message)
+ */
+export const useSimpleLoading = () => {
+    const [isLoading, setIsLoading] = useState(false);
+    const withLoading = useCallback(async (asyncFn) => {
+        setIsLoading(true);
+        try {
+            const result = await asyncFn;
+            return result;
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, []);
+    return {
+        isLoading,
+        startLoading: useCallback(() => setIsLoading(true), []),
+        stopLoading: useCallback(() => setIsLoading(false), []),
+        withLoading,
+    };
+};
+//# sourceMappingURL=useLoading.js.map

package/lib/presentation/hooks/useLoading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLoading.js","sourceRoot":"","sources":["../../../src/presentation/hooks/useLoading.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AA0B9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,GAAqB,EAAE;IAC/C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAC1E,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAc,OAAO,CAAC,CAAC;IAErE;;OAEG;IACH,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,OAAgB,EAAE,OAAoB,OAAO,EAAE,EAAE;QACjF,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,iBAAiB,CAAC,OAAO,IAAI,IAAI,CAAC,CAAC;QACnC,cAAc,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP;;OAEG;IACH,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP;;OAEG;IACH,MAAM,oBAAoB,GAAG,WAAW,CAAC,CAAC,OAAsB,EAAE,EAAE;QAClE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAC7B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP;;OAEG;IACH,MAAM,iBAAiB,GAAG,WAAW,CAAC,CAAC,IAAiB,EAAE,EAAE;QAC1D,cAAc,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP;;OAEG;IACH,MAAM,WAAW,GAAG,WAAW,CAC7B,KAAK,EACH,OAAmB,EACnB,OAAgB,EAChB,OAAoB,OAAO,EACf,EAAE;QACd,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;QAE5B,IAAI,CAAC;YACH,MAAM,MAAM,GAAG,MAAM,OAAO,CAAC;YAC7B,OAAO,MAAM,CAAC;QAChB,CAAC;gBAAS,CAAC;YACT,WAAW,EAAE,CAAC;QAChB,CAAC;IACH,CAAC,EACD,CAAC,YAAY,EAAE,WAAW,CAAC,CAC5B,CAAC;IAEF,OAAO;QACL,gBAAgB;QAChB,SAAS;QACT,cAAc;QACd,WAAW;QAEX,UAAU;QACV,YAAY;QACZ,WAAW;QACX,iBAAiB,EAAE,oBAAoB;QACvC,cAAc,EAAE,iBAAiB;QAEjC,gBAAgB;QAChB,WAAW;KACZ,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,WAAW,GAAG,WAAW,CAC7B,KAAK,EAAM,OAAmB,EAAc,EAAE;QAC5C,YAAY,CAAC,IAAI,CAAC,CAAC;QAEnB,IAAI,CAAC;YACH,MAAM,MAAM,GAAG,MAAM,OAAO,CAAC;YAC7B,OAAO,MAAM,CAAC;QAChB,CAAC;gBAAS,CAAC;YACT,YAAY,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC;IACH,CAAC,EACD,EAAE,CACH,CAAC;IAEF,OAAO;QACL,SAAS;QACT,YAAY,EAAE,WAAW,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;QACvD,WAAW,EAAE,WAAW,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC;QACvD,WAAW;KACZ,CAAC;AACJ,CAAC,CAAC"}