@umituz/react-native-loading 1.0.0

package/src/presentation/components/SkeletonLoader.tsx

@@ -0,0 +1,159 @@
+/**
+ * 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, 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';
+
+/**
+ * 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 const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
+  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: number) => (
+    <View key={`skeleton-group-${index}`} style={styles.skeletonGroup}>
+      {skeletonConfigs.map((config, configIndex) => (
+        <Animated.View
+          key={`skeleton-${index}-${configIndex}`}
+          style={[
+            styles.skeleton,
+            {
+              width: config.width as number | `${number}%` | undefined,
+              height: config.height,
+              borderRadius: config.borderRadius,
+              marginBottom: config.marginBottom,
+              backgroundColor: disableAnimation
+                ? tokens.colors.surfaceSecondary
+                : backgroundColor,
+            } as any,
+          ]}
+        />
+      ))}
+    </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',
+  },
+});

package/src/presentation/hooks/useLoading.ts

@@ -0,0 +1,170 @@
+/**
+ * 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';
+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;
+  stopLoading: () => void;
+  setLoadingMessage: (message: string | null) => void;
+  setLoadingType: (type: LoadingType) => void;
+
+  // Async wrapper
+  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 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') => {
+    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);
+
+      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 <T,>(asyncFn: Promise<T>): Promise<T> => {
+      setIsLoading(true);
+
+      try {
+        const result = await asyncFn;
+        return result;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    []
+  );
+
+  return {
+    isLoading,
+    startLoading: useCallback(() => setIsLoading(true), []),
+    stopLoading: useCallback(() => setIsLoading(false), []),
+    withLoading,
+  };
+};