@umituz/react-native-design-system 2.9.12 → 2.9.14

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.9.12",
-  "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, and onboarding utilities",
+  "version": "2.9.14",
+  "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, onboarding, and loading utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "exports": {
@@ -27,6 +27,7 @@
     "./filesystem": "./src/filesystem/index.ts",
     "./media": "./src/media/index.ts",
     "./tanstack": "./src/tanstack/index.ts",
+    "./loading": "./src/loading/index.ts",
     "./package.json": "./package.json"
   },
   "scripts": {
@@ -51,7 +52,8 @@
     "safe-area",
     "image",
     "timezone",
-    "offline"
+    "offline",
+    "loading"
   ],
   "author": "Ümit UZ <umit@umituz.com>",
   "license": "MIT",

package/src/exports/loading.ts

@@ -0,0 +1,20 @@
+/**
+ * Loading Exports
+ * Global loading state management
+ */
+
+export {
+  useLoadingStore,
+  LoadingOverlay,
+  useGlobalLoading,
+  LoadingProvider,
+} from '../loading';
+
+export type {
+  LoadingSource,
+  LoadingState,
+  LoadingActions,
+  LoadingStore,
+  LoadingProviderProps,
+  LoadingOverlayProps,
+} from '../loading';

package/src/index.ts

@@ -125,3 +125,8 @@ export * from './exports/media';
 // TANSTACK EXPORTS
 // =============================================================================
 export * from './exports/tanstack';
+
+// =============================================================================
+// LOADING EXPORTS
+// =============================================================================
+export * from './exports/loading';

package/src/loading/domain/types/loading.types.ts

@@ -0,0 +1,40 @@
+/**
+ * Loading Types
+ * Type definitions for global loading system
+ */
+
+export type LoadingSource = 'navigation' | 'fetch' | 'manual';
+
+export interface LoadingState {
+  isLoading: boolean;
+  message?: string;
+  source?: LoadingSource;
+  count: number;
+}
+
+export interface LoadingActions {
+  show: (message?: string, source?: LoadingSource) => void;
+  hide: (source?: LoadingSource) => void;
+  reset: () => void;
+}
+
+export interface LoadingStore extends LoadingState, LoadingActions {}
+
+export interface LoadingProviderProps {
+  children: React.ReactNode;
+  spinnerColor?: string;
+  spinnerSize?: 'sm' | 'md' | 'lg' | 'xl';
+  overlayColor?: string;
+  defaultMessage?: string;
+  detectNavigation?: boolean;
+  detectFetching?: boolean;
+  minDisplayTime?: number;
+}
+
+export interface LoadingOverlayProps {
+  visible: boolean;
+  message?: string;
+  spinnerColor?: string;
+  spinnerSize?: 'sm' | 'md' | 'lg' | 'xl';
+  overlayColor?: string;
+}

package/src/loading/index.ts

@@ -0,0 +1,18 @@
+/**
+ * Loading Module
+ * Global loading state management and auto-detection
+ */
+
+export type {
+  LoadingSource,
+  LoadingState,
+  LoadingActions,
+  LoadingStore,
+  LoadingProviderProps,
+  LoadingOverlayProps,
+} from './domain/types/loading.types';
+
+export { useLoadingStore } from './infrastructure/store/LoadingStore';
+export { LoadingOverlay } from './presentation/components/LoadingOverlay';
+export { useGlobalLoading } from './presentation/hooks/useGlobalLoading';
+export { LoadingProvider } from './presentation/providers/LoadingProvider';

package/src/loading/infrastructure/store/LoadingStore.ts

@@ -0,0 +1,43 @@
+/**
+ * LoadingStore
+ * Global loading state management with Zustand
+ */
+
+import { create } from 'zustand';
+import type { LoadingStore, LoadingSource } from '../../domain/types/loading.types';
+
+const initialState = {
+  isLoading: false,
+  message: undefined,
+  source: undefined,
+  count: 0,
+};
+
+export const useLoadingStore = create<LoadingStore>((set) => ({
+  ...initialState,
+
+  show: (message?: string, source: LoadingSource = 'manual') => {
+    set((state) => ({
+      isLoading: true,
+      message: message || state.message,
+      source,
+      count: state.count + 1,
+    }));
+  },
+
+  hide: () => {
+    set((state) => {
+      const newCount = Math.max(0, state.count - 1);
+      return {
+        count: newCount,
+        isLoading: newCount > 0,
+        message: newCount > 0 ? state.message : undefined,
+        source: newCount > 0 ? state.source : undefined,
+      };
+    });
+  },
+
+  reset: () => {
+    set(initialState);
+  },
+}));

package/src/loading/presentation/components/LoadingOverlay.tsx

@@ -0,0 +1,49 @@
+/**
+ * LoadingOverlay Component
+ * Full-screen loading overlay with spinner
+ */
+
+import React from 'react';
+import { View, StyleSheet, Modal } from 'react-native';
+import { AtomicSpinner } from '../../../atoms/AtomicSpinner';
+import type { LoadingOverlayProps } from '../../domain/types/loading.types';
+
+const DEFAULT_OVERLAY_COLOR = 'rgba(0, 0, 0, 0.5)';
+
+export const LoadingOverlay: React.FC<LoadingOverlayProps> = ({
+  visible,
+  message,
+  spinnerColor = 'white',
+  spinnerSize = 'lg',
+  overlayColor = DEFAULT_OVERLAY_COLOR,
+}) => {
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="none"
+      statusBarTranslucent
+    >
+      <View style={[styles.overlay, { backgroundColor: overlayColor }]}>
+        <AtomicSpinner
+          size={spinnerSize}
+          color={spinnerColor}
+          text={message}
+          textPosition="bottom"
+        />
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/src/loading/presentation/hooks/useGlobalLoading.ts

@@ -0,0 +1,51 @@
+/**
+ * useGlobalLoading Hook
+ * Manual control for global loading state
+ */
+
+import { useCallback } from 'react';
+import { useLoadingStore } from '../../infrastructure/store/LoadingStore';
+import type { LoadingSource } from '../../domain/types/loading.types';
+
+interface UseGlobalLoadingReturn {
+  isLoading: boolean;
+  message?: string;
+  show: (message?: string) => void;
+  hide: () => void;
+  withLoading: <T>(
+    asyncFn: () => Promise<T>,
+    message?: string
+  ) => Promise<T>;
+}
+
+export function useGlobalLoading(): UseGlobalLoadingReturn {
+  const { isLoading, message, show, hide } = useLoadingStore();
+
+  const showLoading = useCallback((msg?: string) => {
+    show(msg, 'manual' as LoadingSource);
+  }, [show]);
+
+  const hideLoading = useCallback(() => {
+    hide();
+  }, [hide]);
+
+  const withLoading = useCallback(
+    async <T>(asyncFn: () => Promise<T>, msg?: string): Promise<T> => {
+      showLoading(msg);
+      try {
+        return await asyncFn();
+      } finally {
+        hideLoading();
+      }
+    },
+    [showLoading, hideLoading]
+  );
+
+  return {
+    isLoading,
+    message,
+    show: showLoading,
+    hide: hideLoading,
+    withLoading,
+  };
+}

package/src/loading/presentation/providers/LoadingProvider.tsx

@@ -0,0 +1,65 @@
+/**
+ * LoadingProvider
+ * Global loading provider with auto-detection
+ */
+
+import React, { useEffect, useRef } from 'react';
+import { useIsFetching } from '@tanstack/react-query';
+import { useLoadingStore } from '../../infrastructure/store/LoadingStore';
+import { LoadingOverlay } from '../components/LoadingOverlay';
+import type { LoadingProviderProps } from '../../domain/types/loading.types';
+
+export const LoadingProvider: React.FC<LoadingProviderProps> = ({
+  children,
+  spinnerColor,
+  spinnerSize = 'lg',
+  overlayColor,
+  defaultMessage,
+  detectFetching = true,
+  minDisplayTime = 300,
+}) => {
+  const { isLoading, message, show, hide } = useLoadingStore();
+  const isFetching = useIsFetching();
+  const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const showTimeRef = useRef<number>(0);
+
+  useEffect(() => {
+    if (!detectFetching) return;
+
+    if (isFetching > 0) {
+      if (hideTimeoutRef.current) {
+        clearTimeout(hideTimeoutRef.current);
+        hideTimeoutRef.current = null;
+      }
+      showTimeRef.current = Date.now();
+      show(defaultMessage, 'fetch');
+    } else if (isLoading) {
+      const elapsed = Date.now() - showTimeRef.current;
+      const remaining = Math.max(0, minDisplayTime - elapsed);
+
+      hideTimeoutRef.current = setTimeout(() => {
+        hide();
+        hideTimeoutRef.current = null;
+      }, remaining);
+    }
+
+    return () => {
+      if (hideTimeoutRef.current) {
+        clearTimeout(hideTimeoutRef.current);
+      }
+    };
+  }, [isFetching, detectFetching, show, hide, defaultMessage, minDisplayTime, isLoading]);
+
+  return (
+    <>
+      {children}
+      <LoadingOverlay
+        visible={isLoading}
+        message={message || defaultMessage}
+        spinnerColor={spinnerColor}
+        spinnerSize={spinnerSize}
+        overlayColor={overlayColor}
+      />
+    </>
+  );
+};