@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.4 → 0.1.5

package/src/hooks/use-mobile-skeleton.ts

@@ -0,0 +1,402 @@
+import { useState, useCallback, useRef, useEffect } from 'react'
+
+export interface MobileSkeletonConfig {
+  enableMobileOptimization?: boolean
+  enablePerformanceOptimization?: boolean
+  enableBatteryOptimization?: boolean
+  enableAccessibilitySupport?: boolean
+  enableTouchOptimization?: boolean
+  animationDuration?: number
+  skeletonCount?: number
+  mobileBreakpoint?: number
+}
+
+export interface SkeletonVariant {
+  id: string
+  name: string
+  width: string | number
+  height: string | number
+  borderRadius?: string | number
+  animation?: 'pulse' | 'wave' | 'shimmer' | 'fade'
+  mobileOptimized?: boolean
+  touchFriendly?: boolean
+}
+
+export interface DeviceLoadingState {
+  deviceType: 'mobile' | 'tablet' | 'desktop'
+  orientation: 'portrait' | 'landscape'
+  screenSize: 'small' | 'medium' | 'large'
+  loadingStrategy: 'skeleton' | 'spinner' | 'progress' | 'skeleton-spinner'
+  animationIntensity: 'low' | 'medium' | 'high'
+}
+
+export interface MobileSkeletonCallbacks {
+  onSkeletonCreated?: (variant: SkeletonVariant) => void
+  onLoadingStateChanged?: (state: DeviceLoadingState) => void
+  onPerformanceOptimized?: (optimization: string) => void
+  onBatteryOptimized?: (strategy: string) => void
+  onAccessibilityEnhanced?: (feature: string) => void
+}
+
+export const useMobileSkeleton = (
+  config: MobileSkeletonConfig = {},
+  callbacks: MobileSkeletonCallbacks = {}
+) => {
+  const {
+    enablePerformanceOptimization = true,
+    enableBatteryOptimization = true,
+    enableAccessibilitySupport = true,
+    enableTouchOptimization = true,
+    mobileBreakpoint = 768
+  } = config
+
+  const [deviceState, setDeviceState] = useState<DeviceLoadingState>({
+    deviceType: 'desktop',
+    orientation: 'landscape',
+    screenSize: 'large',
+    loadingStrategy: 'skeleton',
+    animationIntensity: 'medium'
+  })
+
+  const [skeletonVariants, setSkeletonVariants] = useState<SkeletonVariant[]>([])
+  const [isOptimizing, setIsOptimizing] = useState(false)
+  const [optimizations, setOptimizations] = useState<string[]>([])
+  const [performanceMetrics, setPerformanceMetrics] = useState({
+    renderTime: 0,
+    animationFrameRate: 60,
+    memoryUsage: 0,
+    batteryImpact: 'low'
+  })
+
+
+  const animationFrameRef = useRef<number | null>(null)
+  const performanceTimerRef = useRef<number | null>(null)
+
+  // Device detection and loading state management
+  const detectDeviceAndSetLoadingState = useCallback(() => {
+    const width = window.innerWidth
+    const height = window.innerHeight
+    const isMobile = width <= mobileBreakpoint
+    const isTablet = width > mobileBreakpoint && width <= 1024
+    const isPortrait = height > width
+
+    let deviceType: 'mobile' | 'tablet' | 'desktop'
+    let screenSize: 'small' | 'medium' | 'large'
+    let loadingStrategy: 'skeleton' | 'spinner' | 'progress' | 'skeleton-spinner'
+    let animationIntensity: 'low' | 'medium' | 'high'
+
+    if (isMobile) {
+      deviceType = 'mobile'
+      screenSize = 'small'
+      loadingStrategy = 'skeleton'
+      animationIntensity = 'low'
+    } else if (isTablet) {
+      deviceType = 'tablet'
+      screenSize = 'medium'
+      loadingStrategy = 'skeleton-spinner'
+      animationIntensity = 'medium'
+    } else {
+      deviceType = 'desktop'
+      screenSize = 'large'
+      loadingStrategy = 'skeleton'
+      animationIntensity = 'high'
+    }
+
+    const newState: DeviceLoadingState = {
+      deviceType,
+      orientation: isPortrait ? 'portrait' : 'landscape',
+      screenSize,
+      loadingStrategy,
+      animationIntensity
+    }
+
+    setDeviceState(newState)
+    callbacks.onLoadingStateChanged?.(newState)
+
+    return newState
+  }, [mobileBreakpoint, callbacks])
+
+  // Create skeleton variants
+  const createSkeletonVariant = useCallback((
+    variant: Omit<SkeletonVariant, 'id'>
+  ) => {
+    const id = `skeleton-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+    const newVariant: SkeletonVariant = {
+      ...variant,
+      id,
+      mobileOptimized: deviceState.deviceType === 'mobile',
+      touchFriendly: enableTouchOptimization && deviceState.deviceType === 'mobile'
+    }
+
+    setSkeletonVariants(prev => [...prev, newVariant])
+    callbacks.onSkeletonCreated?.(newVariant)
+
+    return id
+  }, [deviceState.deviceType, enableTouchOptimization, callbacks])
+
+  // Generate default skeleton variants
+  const generateDefaultSkeletons = useCallback(() => {
+    const defaults: SkeletonVariant[] = [
+      {
+        id: 'text-line',
+        name: 'Text Line',
+        width: '100%',
+        height: 16,
+        borderRadius: 4,
+        animation: 'pulse',
+        mobileOptimized: true,
+        touchFriendly: true
+      },
+      {
+        id: 'avatar',
+        name: 'Avatar',
+        width: 40,
+        height: 40,
+        borderRadius: '50%',
+        animation: 'shimmer',
+        mobileOptimized: true,
+        touchFriendly: true
+      },
+      {
+        id: 'card',
+        name: 'Card',
+        width: '100%',
+        height: 120,
+        borderRadius: 8,
+        animation: 'wave',
+        mobileOptimized: true,
+        touchFriendly: true
+      },
+      {
+        id: 'button',
+        name: 'Button',
+        width: 120,
+        height: 40,
+        borderRadius: 6,
+        animation: 'pulse',
+        mobileOptimized: true,
+        touchFriendly: true
+      }
+    ]
+
+    setSkeletonVariants(defaults)
+    return defaults
+  }, [])
+
+  // Performance optimization
+  const optimizePerformance = useCallback(() => {
+    if (!enablePerformanceOptimization) return
+
+    setIsOptimizing(true)
+    
+    setTimeout(() => {
+      const performanceOptimizations = [
+        'Animation frame rate optimized for mobile',
+        'Memory usage optimized for skeleton rendering',
+        'Render cycle optimization applied',
+        'Animation performance enhanced'
+      ]
+      
+      setOptimizations(prev => [...prev, ...performanceOptimizations])
+      setIsOptimizing(false)
+      
+      performanceOptimizations.forEach(optimization => {
+        callbacks.onPerformanceOptimized?.(optimization)
+      })
+    }, 300)
+  }, [enablePerformanceOptimization, callbacks])
+
+  // Battery-conscious loading
+  const optimizeBatteryConsumption = useCallback(() => {
+    if (!enableBatteryOptimization) return
+
+    setIsOptimizing(true)
+    
+    setTimeout(() => {
+      const batteryOptimizations = [
+        'Battery-conscious animation intensity applied',
+        'Reduced animation complexity for mobile',
+        'Power-efficient loading states enabled',
+        'Battery level monitoring active'
+      ]
+      
+      setOptimizations(prev => [...prev, ...batteryOptimizations])
+      setIsOptimizing(false)
+      
+      batteryOptimizations.forEach(optimization => {
+        callbacks.onBatteryOptimized?.(optimization)
+      })
+    }, 250)
+  }, [enableBatteryOptimization, callbacks])
+
+  // Accessibility support
+  const enhanceAccessibility = useCallback(() => {
+    if (!enableAccessibilitySupport) return
+
+    setIsOptimizing(true)
+    
+    setTimeout(() => {
+      const accessibilityEnhancements = [
+        'Screen reader support for loading states',
+        'Reduced motion support for animations',
+        'Focus management for skeleton elements',
+        'ARIA labels for loading indicators'
+      ]
+      
+      setOptimizations(prev => [...prev, ...accessibilityEnhancements])
+      setIsOptimizing(false)
+      
+      accessibilityEnhancements.forEach(enhancement => {
+        callbacks.onAccessibilityEnhanced?.(enhancement)
+      })
+    }, 200)
+  }, [enableAccessibilitySupport, callbacks])
+
+  // Touch optimization
+  const optimizeTouchInteractions = useCallback(() => {
+    if (!enableTouchOptimization || deviceState.deviceType !== 'mobile') return
+
+    setIsOptimizing(true)
+    
+    setTimeout(() => {
+      const touchOptimizations = [
+        'Touch-friendly skeleton interactions enabled',
+        'Touch target sizes optimized for mobile',
+        'Touch feedback animations applied',
+        'Gesture recognition for skeleton elements'
+      ]
+      
+      setOptimizations(prev => [...prev, ...touchOptimizations])
+      setIsOptimizing(false)
+      
+      touchOptimizations.forEach(optimization => {
+        callbacks.onPerformanceOptimized?.(optimization)
+      })
+    }, 200)
+  }, [enableTouchOptimization, deviceState.deviceType, callbacks])
+
+  // Performance monitoring
+  const startPerformanceMonitoring = useCallback(() => {
+    if (!enablePerformanceOptimization) return () => {}
+
+    const startTime = performance.now()
+    let frameCount = 0
+    let lastTime = startTime
+
+    const measurePerformance = () => {
+      const currentTime = performance.now()
+      frameCount++
+      
+      if (currentTime - lastTime >= 1000) {
+        const fps = Math.round((frameCount * 1000) / (currentTime - lastTime))
+        const renderTime = currentTime - startTime
+        
+        setPerformanceMetrics(prev => ({
+          ...prev,
+          renderTime,
+          animationFrameRate: fps
+        }))
+        
+        frameCount = 0
+        lastTime = currentTime
+      }
+      
+      animationFrameRef.current = requestAnimationFrame(measurePerformance)
+    }
+    
+    animationFrameRef.current = requestAnimationFrame(measurePerformance)
+    
+    return () => {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current)
+      }
+    }
+  }, [enablePerformanceOptimization])
+
+  // Auto-optimize based on device state
+  const autoOptimize = useCallback(() => {
+    if (deviceState.deviceType === 'mobile') {
+      optimizePerformance()
+      optimizeBatteryConsumption()
+      enhanceAccessibility()
+      optimizeTouchInteractions()
+    }
+  }, [deviceState.deviceType, optimizePerformance, optimizeBatteryConsumption, enhanceAccessibility, optimizeTouchInteractions])
+
+  // Initialize device detection and optimization
+  useEffect(() => {
+    detectDeviceAndSetLoadingState()
+    generateDefaultSkeletons()
+    
+    // Set up resize listener
+    const handleResize = () => {
+      detectDeviceAndSetLoadingState()
+    }
+    
+    window.addEventListener('resize', handleResize)
+    
+    // Set up orientation change listener
+    const handleOrientationChange = () => {
+      setTimeout(detectDeviceAndSetLoadingState, 100)
+    }
+    
+    window.addEventListener('orientationchange', handleOrientationChange)
+    
+    return () => {
+      window.removeEventListener('resize', handleResize)
+      window.removeEventListener('orientationchange', handleOrientationChange)
+    }
+  }, [detectDeviceAndSetLoadingState, generateDefaultSkeletons])
+
+  // Auto-optimize when device state changes
+  useEffect(() => {
+    autoOptimize()
+  }, [autoOptimize])
+
+  // Start performance monitoring
+  useEffect(() => {
+    const stopMonitoring = startPerformanceMonitoring()
+    
+    return () => {
+      stopMonitoring()
+    }
+  }, [startPerformanceMonitoring])
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current)
+      }
+      if (performanceTimerRef.current) {
+        clearInterval(performanceTimerRef.current)
+      }
+    }
+  }, [])
+
+  return {
+    // State
+    deviceState,
+    skeletonVariants,
+    isOptimizing,
+    optimizations,
+    performanceMetrics,
+    
+    // Functions
+    createSkeletonVariant,
+    generateDefaultSkeletons,
+    optimizePerformance,
+    optimizeBatteryConsumption,
+    enhanceAccessibility,
+    optimizeTouchInteractions,
+    autoOptimize,
+    
+    // Utility functions
+    isMobileOptimized: () => deviceState.deviceType === 'mobile',
+    getLoadingStrategy: () => deviceState.loadingStrategy,
+    getAnimationIntensity: () => deviceState.animationIntensity,
+    clearOptimizations: () => setOptimizations([])
+  }
+}
+
+export default useMobileSkeleton