@umituz/react-native-loading 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-loading",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Loading states and animations for React Native apps with breathing animations, skeleton loaders, and state management hooks",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -22,7 +22,7 @@
     "animation",
     "spinner"
   ],
-  "author": "\u00dcmit UZ <umit@umituz.com>",
+  "author": "Ümit UZ <umit@umituz.com>",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -36,10 +36,12 @@
   "devDependencies": {
     "@types/react": "^18.2.45",
     "@types/react-native": "^0.73.0",
-    "@umituz/react-native-design-system": "^1.5.0",
+    "@umituz/react-native-design-system": "^1.5.28",
+    "@umituz/react-native-design-system-theme": "latest",
     "react": "^18.2.0",
     "react-native": "^0.74.0",
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "zustand": "^5.0.2"
   },
   "publishConfig": {
     "access": "public"

package/src/domain/entities/Loading.ts

@@ -1,18 +1,12 @@
 /**
  * Loading Domain - Entity Definitions
  *
- * Core types and interfaces for loading states and animations.
- * Provides consistent loading UX across all apps.
+ * Core types and configurations for loading states.
  *
  * @domain loading
  * @layer domain/entities
  */
 
-/**
- * Loading animation type
- */
-export type LoadingType = 'pulse' | 'spinner' | 'dots' | 'skeleton';
-
 /**
  * Loading size preset
  */
@@ -23,22 +17,6 @@ export type LoadingSize = 'small' | 'medium' | 'large';
  */
 export type SkeletonPattern = 'list' | 'card' | 'profile' | 'text' | 'custom';
 
-/**
- * Loading configuration
- */
-export interface LoadingConfig {
-  /** Animation type */
-  type: LoadingType;
-  /** Size preset */
-  size: LoadingSize;
-  /** Loading emoji (customizable per app) */
-  emoji?: string;
-  /** Loading message */
-  message?: string;
-  /** Full screen mode */
-  fullScreen?: boolean;
-}
-
 /**
  * Size configuration for each preset
  */
@@ -58,15 +36,6 @@ export interface SkeletonConfig {
   marginBottom?: number;
 }
 
-/**
- * Animation timing configuration
- */
-export interface AnimationConfig {
-  duration: number;
-  toValue: number;
-  easing?: 'linear' | 'ease' | 'easeIn' | 'easeOut' | 'easeInOut';
-}
-
 /**
  * Size configurations for loading states
  */
@@ -88,58 +57,6 @@ export const SIZE_CONFIGS: Record<LoadingSize, SizeConfig> = {
   },
 };
 
-/**
- * App-specific emoji presets
- * Apps can override the default emoji based on their theme
- */
-export const LOADING_EMOJIS = {
-  meditation: '🧘',
-  fitness: '💪',
-  workout: '🏋️',
-  running: '🏃',
-  cycling: '🚴',
-  yoga: '🧘‍♀️',
-  health: '🏥',
-  nutrition: '🥗',
-  productivity: '⏳',
-  education: '📚',
-  reading: '📖',
-  music: '🎵',
-  art: '🎨',
-  travel: '✈️',
-  finance: '💰',
-  shopping: '🛍️',
-  cooking: '👨‍🍳',
-  gaming: '🎮',
-  default: '⌛',
-} as const;
-
-/**
- * Animation configurations
- */
-export const ANIMATION_CONFIGS = {
-  pulse: {
-    duration: 1000,
-    toValue: 1.15,
-    easing: 'easeInOut' as const,
-  },
-  spinner: {
-    duration: 1000,
-    toValue: 360,
-    easing: 'linear' as const,
-  },
-  dots: {
-    duration: 500,
-    toValue: 1,
-    easing: 'easeInOut' as const,
-  },
-  skeleton: {
-    duration: 1200,
-    toValue: 1,
-    easing: 'linear' as const,
-  },
-} as const;
-
 /**
  * Skeleton pattern configurations
  */
@@ -166,130 +83,6 @@ export const SKELETON_PATTERNS: Record<SkeletonPattern, SkeletonConfig[]> = {
 };
 
 /**
- * Loading utility class
- */
-export class LoadingUtils {
-  /**
-   * Get emoji for app category
-   */
-  static getEmojiForCategory(category: string): string {
-    const normalizedCategory = category.toLowerCase();
-
-    if (normalizedCategory.includes('meditation') || normalizedCategory.includes('mindfulness')) {
-      return LOADING_EMOJIS.meditation;
-    }
-    if (normalizedCategory.includes('fitness') || normalizedCategory.includes('gym')) {
-      return LOADING_EMOJIS.fitness;
-    }
-    if (normalizedCategory.includes('workout')) {
-      return LOADING_EMOJIS.workout;
-    }
-    if (normalizedCategory.includes('running') || normalizedCategory.includes('run')) {
-      return LOADING_EMOJIS.running;
-    }
-    if (normalizedCategory.includes('cycling') || normalizedCategory.includes('bike')) {
-      return LOADING_EMOJIS.cycling;
-    }
-    if (normalizedCategory.includes('yoga')) {
-      return LOADING_EMOJIS.yoga;
-    }
-    if (normalizedCategory.includes('health') || normalizedCategory.includes('medical')) {
-      return LOADING_EMOJIS.health;
-    }
-    if (normalizedCategory.includes('nutrition') || normalizedCategory.includes('diet')) {
-      return LOADING_EMOJIS.nutrition;
-    }
-    if (normalizedCategory.includes('productivity') || normalizedCategory.includes('task')) {
-      return LOADING_EMOJIS.productivity;
-    }
-    if (normalizedCategory.includes('education') || normalizedCategory.includes('learn')) {
-      return LOADING_EMOJIS.education;
-    }
-    if (normalizedCategory.includes('reading') || normalizedCategory.includes('book')) {
-      return LOADING_EMOJIS.reading;
-    }
-    if (normalizedCategory.includes('music') || normalizedCategory.includes('audio')) {
-      return LOADING_EMOJIS.music;
-    }
-    if (normalizedCategory.includes('art') || normalizedCategory.includes('creative')) {
-      return LOADING_EMOJIS.art;
-    }
-    if (normalizedCategory.includes('travel') || normalizedCategory.includes('trip')) {
-      return LOADING_EMOJIS.travel;
-    }
-    if (normalizedCategory.includes('finance') || normalizedCategory.includes('money')) {
-      return LOADING_EMOJIS.finance;
-    }
-    if (normalizedCategory.includes('shopping') || normalizedCategory.includes('shop')) {
-      return LOADING_EMOJIS.shopping;
-    }
-    if (normalizedCategory.includes('cooking') || normalizedCategory.includes('recipe')) {
-      return LOADING_EMOJIS.cooking;
-    }
-    if (normalizedCategory.includes('gaming') || normalizedCategory.includes('game')) {
-      return LOADING_EMOJIS.gaming;
-    }
-
-    return LOADING_EMOJIS.default;
-  }
-
-  /**
-   * Get default loading config
-   */
-  static getDefaultConfig(overrides?: Partial<LoadingConfig>): LoadingConfig {
-    return {
-      type: 'pulse',
-      size: 'large',
-      emoji: LOADING_EMOJIS.default,
-      fullScreen: false,
-      ...overrides,
-    };
-  }
-
-  /**
-   * Get size config
-   */
-  static getSizeConfig(size: LoadingSize): SizeConfig {
-    return SIZE_CONFIGS[size];
-  }
-
-  /**
-   * Get animation config
-   */
-  static getAnimationConfig(type: LoadingType): AnimationConfig {
-    return ANIMATION_CONFIGS[type];
-  }
-
-  /**
-   * Get skeleton pattern
-   */
-  static getSkeletonPattern(pattern: SkeletonPattern): SkeletonConfig[] {
-    return SKELETON_PATTERNS[pattern];
-  }
-
-  /**
-   * Validate loading config
-   */
-  static validateConfig(config: Partial<LoadingConfig>): LoadingConfig {
-    return {
-      type: config.type || 'pulse',
-      size: config.size || 'large',
-      emoji: config.emoji || LOADING_EMOJIS.default,
-      message: config.message,
-      fullScreen: config.fullScreen ?? false,
-    };
-  }
-}
-
-/**
- * Loading constants
+ * Default emoji for loading state
  */
-export const LOADING_CONSTANTS = {
-  DEFAULT_TYPE: 'pulse' as LoadingType,
-  DEFAULT_SIZE: 'large' as LoadingSize,
-  DEFAULT_EMOJI: LOADING_EMOJIS.default,
-  BREATHING_CYCLE_DURATION: 2000, // 2 seconds (inhale + exhale)
-  SPINNER_ROTATION_DURATION: 1000, // 1 second
-  DOTS_WAVE_DURATION: 1500, // 1.5 seconds
-  SKELETON_SHIMMER_DURATION: 1200, // 1.2 seconds
-} as const;
+export const DEFAULT_LOADING_EMOJI = '⏳';

package/src/index.ts

@@ -1,101 +1,35 @@
 /**
- * Loading Domain - Barrel Export
+ * @umituz/react-native-loading
  *
- * 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
+ * Loading states and skeleton loaders for React Native apps.
  *
  * 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();
+ * import { LoadingState, SkeletonLoader, useLoading } from '@umituz/react-native-loading';
  *
- *   const loadData = () => withLoading(
- *     fetchData(),
- *     'Loading data...'
- *   );
+ * // Full screen loading with custom emoji
+ * <LoadingState emoji="🎬" fullScreen />
  *
- *   return (
- *     <View>
- *       {isLoading && <LoadingState message={loadingMessage} />}
- *       <Button onPress={loadData}>Load</Button>
- *     </View>
- *   );
- * };
+ * // With message
+ * <LoadingState emoji="⏳" message="Loading..." />
  *
- * // Custom emoji per app
- * const FitnessLoadingScreen = () => (
- *   <LoadingState
- *     emoji={LOADING_EMOJIS.fitness}
- *     message="Loading workouts..."
- *   />
- * );
+ * // Skeleton loader
+ * <SkeletonLoader pattern="list" count={5} />
  * ```
  */
 
 // Domain Entities
 export type {
-  LoadingType,
   LoadingSize,
   SkeletonPattern,
-  LoadingConfig,
   SizeConfig,
   SkeletonConfig,
-  AnimationConfig,
 } from './domain/entities/Loading';
 
 export {
   SIZE_CONFIGS,
-  LOADING_EMOJIS,
-  ANIMATION_CONFIGS,
   SKELETON_PATTERNS,
-  LoadingUtils,
-  LOADING_CONSTANTS,
+  DEFAULT_LOADING_EMOJI,
 } from './domain/entities/Loading';
 
 // Presentation Components

package/src/presentation/components/LoadingState.tsx

@@ -1,30 +1,17 @@
 /**
- * Loading Domain - LoadingState Component
+ * Loading State 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, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
-import { useAppDesignTokens, AtomicText } from '@umituz/react-native-design-system';
+import { AtomicText } from '@umituz/react-native-design-system';
 import type { LoadingSize } from '../../domain/entities/Loading';
-import {
-  SIZE_CONFIGS,
-  LOADING_EMOJIS,
-  LOADING_CONSTANTS,
-} from '../../domain/entities/Loading';
+import { SIZE_CONFIGS, DEFAULT_LOADING_EMOJI } from '../../domain/entities/Loading';
 
-/**
- * LoadingState component props
- */
 export interface LoadingStateProps {
-  /** Loading emoji - default: ⌛ (customizable per app) */
+  /** Loading emoji - pass any emoji dynamically */
   emoji?: string;
   /** Loading message (optional) */
   message?: string;
@@ -38,56 +25,26 @@ export interface LoadingStateProps {
   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 const LoadingState: React.FC<LoadingStateProps> = ({
-  emoji = LOADING_EMOJIS.default,
+  emoji = DEFAULT_LOADING_EMOJI,
   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,
@@ -113,7 +70,6 @@ export const LoadingState: React.FC<LoadingStateProps> = ({
         style,
       ]}
     >
-      {/* Animated Emoji with breathing pulse */}
       <Animated.Text
         style={[
           styles.emoji,
@@ -126,11 +82,10 @@ export const LoadingState: React.FC<LoadingStateProps> = ({
         {emoji}
       </Animated.Text>
 
-      {/* Optional Loading Message */}
       {config.showMessage && message && (
         <AtomicText
           type="bodySmall"
-          color="textSecondary"
+          color="secondary"
           style={[styles.message, messageStyle]}
         >
           {message}
@@ -151,7 +106,7 @@ const styles = StyleSheet.create({
     paddingVertical: 60,
   },
   emoji: {
-    fontFamily: 'System', // Emoji font
+    fontFamily: 'System',
   },
   message: {
     textAlign: 'center',

package/src/presentation/components/SkeletonLoader.tsx

@@ -1,25 +1,17 @@
 /**
- * Loading Domain - SkeletonLoader Component
+ * Skeleton Loader 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, type StyleProp, type ViewStyle } from 'react-native';
 import { useAppDesignTokens } from '@umituz/react-native-design-system';
 import type { SkeletonPattern, SkeletonConfig } from '../../domain/entities/Loading';
-import {
-  SKELETON_PATTERNS,
-  LOADING_CONSTANTS,
-} from '../../domain/entities/Loading';
+import { SKELETON_PATTERNS } from '../../domain/entities/Loading';
+
+const SHIMMER_DURATION = 1200;
 
-/**
- * SkeletonLoader component props
- */
 export interface SkeletonLoaderProps {
   /** Skeleton pattern preset */
   pattern?: SkeletonPattern;
@@ -33,36 +25,6 @@ export interface SkeletonLoaderProps {
   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 const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
   pattern = 'list',
   custom,
@@ -71,25 +33,21 @@ export const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
   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
+          duration: SHIMMER_DURATION,
+          useNativeDriver: false,
         }),
         Animated.timing(shimmerAnim, {
           toValue: 0,
@@ -106,7 +64,6 @@ export const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
     };
   }, [shimmerAnim, disableAnimation]);
 
-  // Interpolate shimmer animation to background color
   const backgroundColor = shimmerAnim.interpolate({
     inputRange: [0, 0.5, 1],
     outputRange: [
@@ -116,7 +73,6 @@ export const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
     ],
   });
 
-  // Render skeleton items
   const renderSkeletonItem = (index: number) => (
     <View key={`skeleton-group-${index}`} style={styles.skeletonGroup}>
       {skeletonConfigs.map((config, configIndex) => (

package/src/presentation/hooks/useLoading.ts

@@ -1,122 +1,43 @@
 /**
- * Loading Domain - useLoading Hook
+ * Loading Hook
  *
  * React hook for managing loading states.
- * Provides consistent loading state management across components.
- *
- * @domain loading
- * @layer presentation/hooks
  */
 
 import { useState, useCallback } from 'react';
-import type { LoadingType } from '../../domain/entities/Loading';
 
-/**
- * useLoading hook return type
- */
 export interface UseLoadingReturn {
-  // Loading state
   isLoading: boolean;
   loadingMessage: string | null;
-  loadingType: LoadingType;
-
-  // Actions
-  startLoading: (message?: string, type?: LoadingType) => void;
+  startLoading: (message?: string) => void;
   stopLoading: () => void;
   setLoadingMessage: (message: string | null) => void;
-  setLoadingType: (type: LoadingType) => void;
-
-  // Async wrapper
-  withLoading: <T>(
-    asyncFn: Promise<T>,
-    message?: string,
-    type?: LoadingType
-  ) => Promise<T>;
+  withLoading: <T>(asyncFn: Promise<T>, message?: string) => 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 const useLoading = (): UseLoadingReturn => {
   const [isLoading, setIsLoading] = useState(false);
   const [loadingMessage, setLoadingMessage] = useState<string | null>(null);
-  const [loadingType, setLoadingType] = useState<LoadingType>('pulse');
 
-  /**
-   * Start loading state
-   */
-  const startLoading = useCallback((message?: string, type: LoadingType = 'pulse') => {
+  const startLoading = useCallback((message?: string) => {
     setIsLoading(true);
     setLoadingMessage(message || null);
-    setLoadingType(type);
   }, []);
 
-  /**
-   * Stop loading state
-   */
   const stopLoading = useCallback(() => {
     setIsLoading(false);
     setLoadingMessage(null);
   }, []);
 
-  /**
-   * Update loading message
-   */
   const updateLoadingMessage = useCallback((message: string | null) => {
     setLoadingMessage(message);
   }, []);
 
-  /**
-   * Update loading type
-   */
-  const updateLoadingType = useCallback((type: LoadingType) => {
-    setLoadingType(type);
-  }, []);
-
-  /**
-   * Async wrapper that automatically manages loading state
-   */
   const withLoading = useCallback(
-    async <T,>(
-      asyncFn: Promise<T>,
-      message?: string,
-      type: LoadingType = 'pulse'
-    ): Promise<T> => {
-      startLoading(message, type);
-
+    async <T,>(asyncFn: Promise<T>, message?: string): Promise<T> => {
+      startLoading(message);
       try {
-        const result = await asyncFn;
-        return result;
+        return await asyncFn;
       } finally {
         stopLoading();
       }
@@ -125,24 +46,17 @@ export const useLoading = (): UseLoadingReturn => {
   );
 
   return {
-    // Loading state
     isLoading,
     loadingMessage,
-    loadingType,
-
-    // Actions
     startLoading,
     stopLoading,
     setLoadingMessage: updateLoadingMessage,
-    setLoadingType: updateLoadingType,
-
-    // Async wrapper
     withLoading,
   };
 };
 
 /**
- * Convenience hook for simple loading state (no message)
+ * Simple loading hook (no message)
  */
 export const useSimpleLoading = () => {
   const [isLoading, setIsLoading] = useState(false);
@@ -150,10 +64,8 @@ export const useSimpleLoading = () => {
   const withLoading = useCallback(
     async <T,>(asyncFn: Promise<T>): Promise<T> => {
       setIsLoading(true);
-
       try {
-        const result = await asyncFn;
-        return result;
+        return await asyncFn;
       } finally {
         setIsLoading(false);
       }

package/src/USAGE_EXAMPLES.md

@@ -1,429 +0,0 @@
-# Loading Domain - Usage Examples
-
-This file provides comprehensive examples for using the loading domain across all generated apps.
-
-## 📋 Table of Contents
-
-1. [Basic Loading State](#basic-loading-state)
-2. [Skeleton Loaders](#skeleton-loaders)
-3. [Loading State Hook](#loading-state-hook)
-4. [Full Screen Loading](#full-screen-loading)
-5. [List Screens with Skeleton](#list-screens-with-skeleton)
-6. [Custom Emoji per App](#custom-emoji-per-app)
-
----
-
-## Basic Loading State
-
-### Simple Loading Indicator
-
-```typescript
-import { LoadingState } from '@domains/loading';
-
-const MyScreen = () => {
-  const [isLoading, setIsLoading] = useState(true);
-
-  return (
-    <View>
-      {isLoading ? (
-        <LoadingState message="Loading data..." />
-      ) : (
-        <Content />
-      )}
-    </View>
-  );
-};
-```
-
-### Inline Loading (Small Size)
-
-```typescript
-<LoadingState size="small" />
-```
-
-### Section Loading (Medium Size)
-
-```typescript
-<LoadingState size="medium" message="Fetching settings..." />
-```
-
----
-
-## Skeleton Loaders
-
-### List Skeleton
-
-```typescript
-import { SkeletonLoader } from '@domains/loading';
-
-const ListScreen = () => {
-  const [data, setData] = useState([]);
-  const [isLoading, setIsLoading] = useState(true);
-
-  return (
-    <View>
-      {isLoading ? (
-        <SkeletonLoader pattern="list" count={5} />
-      ) : (
-        <FlatList data={data} ... />
-      )}
-    </View>
-  );
-};
-```
-
-### Card Skeleton
-
-```typescript
-<SkeletonLoader pattern="card" count={3} />
-```
-
-### Profile Skeleton
-
-```typescript
-<SkeletonLoader pattern="profile" />
-```
-
-### Text Skeleton
-
-```typescript
-<SkeletonLoader pattern="text" count={3} />
-```
-
-### Custom Skeleton
-
-```typescript
-<SkeletonLoader
-  pattern="custom"
-  custom={[
-    { width: 100, height: 100, borderRadius: 50 },
-    { width: '80%', height: 20, borderRadius: 4, marginBottom: 8 },
-    { width: '60%', height: 16, borderRadius: 4 },
-  ]}
-/>
-```
-
----
-
-## Loading State Hook
-
-### Manual Control
-
-```typescript
-import { useLoading } from '@domains/loading';
-
-const DataScreen = () => {
-  const { isLoading, loadingMessage, startLoading, stopLoading } = useLoading();
-
-  const handleSave = async () => {
-    startLoading('Saving changes...');
-    try {
-      await saveData();
-    } finally {
-      stopLoading();
-    }
-  };
-
-  return (
-    <View>
-      {isLoading && <LoadingState message={loadingMessage} />}
-      <Button onPress={handleSave}>Save</Button>
-    </View>
-  );
-};
-```
-
-### Async Wrapper (Automatic)
-
-```typescript
-const DataScreen = () => {
-  const { isLoading, loadingMessage, withLoading } = useLoading();
-
-  const loadData = () => withLoading(
-    fetchData(),
-    'Loading data...'
-  );
-
-  useEffect(() => {
-    loadData();
-  }, []);
-
-  return (
-    <View>
-      {isLoading ? (
-        <LoadingState message={loadingMessage} />
-      ) : (
-        <Content />
-      )}
-    </View>
-  );
-};
-```
-
-### Simple Loading Hook
-
-```typescript
-import { useSimpleLoading } from '@domains/loading';
-
-const SimpleScreen = () => {
-  const { isLoading, withLoading } = useSimpleLoading();
-
-  const handleAction = () => withLoading(performAction());
-
-  return (
-    <View>
-      {isLoading && <LoadingState />}
-      <Button onPress={handleAction}>Do Action</Button>
-    </View>
-  );
-};
-```
-
----
-
-## Full Screen Loading
-
-### With Message
-
-```typescript
-<LoadingState
-  fullScreen
-  message="Please wait..."
-  size="large"
-/>
-```
-
-### Initial App Load
-
-```typescript
-const App = () => {
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    const prepare = async () => {
-      await loadAssets();
-      await loadData();
-      setIsReady(true);
-    };
-    prepare();
-  }, []);
-
-  if (!isReady) {
-    return <LoadingState fullScreen message="Initializing app..." />;
-  }
-
-  return <MainApp />;
-};
-```
-
----
-
-## List Screens with Skeleton
-
-### Complete Example
-
-```typescript
-import { SkeletonLoader, useLoading } from '@domains/loading';
-
-const WorkoutsScreen = () => {
-  const [workouts, setWorkouts] = useState([]);
-  const { isLoading, withLoading } = useLoading();
-
-  const loadWorkouts = () => withLoading(
-    fetchWorkouts(),
-    'Loading workouts...'
-  );
-
-  useEffect(() => {
-    loadWorkouts();
-  }, []);
-
-  return (
-    <ScreenLayout>
-      <ScreenHeader title="Workouts" />
-
-      {isLoading ? (
-        <SkeletonLoader pattern="list" count={8} />
-      ) : workouts.length === 0 ? (
-        <EmptyState message="No workouts found" />
-      ) : (
-        <FlatList
-          data={workouts}
-          renderItem={({ item }) => <WorkoutCard workout={item} />}
-        />
-      )}
-    </ScreenLayout>
-  );
-};
-```
-
----
-
-## Custom Emoji per App
-
-### Meditation App
-
-```typescript
-import { LoadingState, LOADING_EMOJIS } from '@domains/loading';
-
-<LoadingState
-  emoji={LOADING_EMOJIS.meditation}
-  message="Loading meditations..."
-/>
-```
-
-### Fitness App
-
-```typescript
-<LoadingState
-  emoji={LOADING_EMOJIS.fitness}
-  message="Loading workouts..."
-/>
-```
-
-### Productivity App
-
-```typescript
-<LoadingState
-  emoji={LOADING_EMOJIS.productivity}
-  message="Loading tasks..."
-/>
-```
-
-### Available Emojis
-
-```typescript
-LOADING_EMOJIS = {
-  meditation: '🧘',
-  fitness: '💪',
-  workout: '🏋️',
-  running: '🏃',
-  cycling: '🚴',
-  yoga: '🧘‍♀️',
-  health: '🏥',
-  nutrition: '🥗',
-  productivity: '⏳',
-  education: '📚',
-  reading: '📖',
-  music: '🎵',
-  art: '🎨',
-  travel: '✈️',
-  finance: '💰',
-  shopping: '🛍️',
-  cooking: '👨‍🍳',
-  gaming: '🎮',
-  default: '⌛',
-}
-```
-
----
-
-## Settings Screen Example
-
-```typescript
-import { LoadingState, useLoading } from '@domains/loading';
-
-const SettingsScreen = () => {
-  const { theme } = useTheme();
-  const { language, setLanguage } = useLocalization();
-  const { isLoading, withLoading } = useLoading();
-
-  const handleLanguageChange = (newLanguage: string) => withLoading(
-    setLanguage(newLanguage),
-    'Changing language...'
-  );
-
-  if (isLoading) {
-    return <LoadingState fullScreen message="Applying changes..." />;
-  }
-
-  return (
-    <ScreenLayout>
-      <ScreenHeader title="Settings" />
-      <ScrollView>
-        {/* Settings content */}
-      </ScrollView>
-    </ScreenLayout>
-  );
-};
-```
-
----
-
-## Onboarding Screen Example
-
-```typescript
-import { LoadingState, useLoading } from '@domains/loading';
-
-const OnboardingScreen = () => {
-  const { completeOnboarding } = useOnboarding();
-  const { isLoading, withLoading } = useLoading();
-
-  const handleComplete = () => withLoading(
-    completeOnboarding(),
-    'Setting up your account...'
-  );
-
-  return (
-    <ScreenLayout>
-      {isLoading ? (
-        <LoadingState fullScreen message="Almost there..." />
-      ) : (
-        <OnboardingContent onComplete={handleComplete} />
-      )}
-    </ScreenLayout>
-  );
-};
-```
-
----
-
-## Best Practices
-
-1. **Use skeleton loaders for lists** - Better UX than full-screen loading
-2. **Match emoji to app theme** - Use LOADING_EMOJIS for consistency
-3. **Show meaningful messages** - "Loading workouts..." not "Please wait..."
-4. **Use full screen sparingly** - Only for critical app-wide operations
-5. **Prefer useLoading hook** - Centralized state management
-6. **Use withLoading wrapper** - Cleaner async code
-7. **Test loading states** - Ensure they work on slow connections
-
----
-
-## Migration from Old Loading Patterns
-
-### Before (ActivityIndicator)
-
-```typescript
-// ❌ OLD - Inconsistent
-{isLoading && <ActivityIndicator />}
-{isLoading && <Text>Loading...</Text>}
-```
-
-### After (LoadingState)
-
-```typescript
-// ✅ NEW - Consistent, themed
-{isLoading && <LoadingState message="Loading..." />}
-```
-
-### Before (Custom Spinner)
-
-```typescript
-// ❌ OLD - Duplicated code
-<View style={styles.loadingContainer}>
-  <ActivityIndicator size="large" />
-  <Text style={styles.loadingText}>Please wait...</Text>
-</View>
-```
-
-### After (LoadingState)
-
-```typescript
-// ✅ NEW - One line, consistent
-<LoadingState size="large" message="Please wait..." />
-```
-
----
-
-This loading domain ensures **consistent, beautiful, calming loading experiences** across all 100+ generated apps! 🧘