@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.7 → 0.2.9

package/dist/components/ui/mobile-skeleton-loading-demo.d.ts

@@ -0,0 +1,628 @@
+export const MobileSkeletonLoadingDemo: React.FC = () => {
+  const [activeTab, setActiveTab] = useState('overview')
+  const [isLoading, setIsLoading] = useState(false)
+  const [loadingProgress, setLoadingProgress] = useState(0)
+  const [showSkeletons, setShowSkeletons] = useState(true)
+
+  // Initialize all hooks
+  const mobileSkeleton = useMobileSkeleton(
+    {
+      enableMobileOptimization: true,
+      enablePerformanceOptimization: true,
+      enableBatteryOptimization: true,
+      enableAccessibilitySupport: true,
+      enableTouchOptimization: true
+    },
+    {
+      onSkeletonCreated: (variant) => console.log('Skeleton created:', variant),
+      onLoadingStateChanged: (state) => console.log('Loading state changed:', state),
+      onPerformanceOptimized: (optimization) => console.log('Performance optimized:', optimization),
+      onBatteryOptimized: (strategy) => console.log('Battery optimized:', strategy),
+      onAccessibilityEnhanced: (feature) => console.log('Accessibility enhanced:', feature)
+    }
+  )
+
+  const deviceLoadingStates = useDeviceLoadingStates(
+    {
+      enableMobileStates: true,
+      enableTabletStates: true,
+      enableDesktopStates: true,
+      enableAdaptiveBehavior: true,
+      enableOrientationSupport: true,
+      enablePerformanceAdaptation: true
+    },
+    {
+      onLoadingStateChanged: (state) => console.log('Device loading state changed:', state),
+      onDeviceStateChanged: (deviceState) => console.log('Device state changed:', deviceState),
+      onAdaptiveBehaviorEnabled: (behavior) => console.log('Adaptive behavior enabled:', behavior),
+      onPerformanceAdapted: (adaptation) => console.log('Performance adapted:', adaptation)
+    }
+  )
+
+  const loadingPerformance = useLoadingPerformance(
+    {
+      enableAnimationOptimization: true,
+      enableMemoryManagement: true,
+      enableBatteryOptimization: true,
+      enablePerformanceMonitoring: true,
+      enableAutoOptimization: true
+    },
+    {
+      onPerformanceOptimized: (strategy) => console.log('Loading performance optimized:', strategy),
+      onMemoryOptimized: (optimization) => console.log('Memory optimized:', optimization),
+      onBatteryOptimized: (strategy) => console.log('Battery optimized:', strategy),
+      onAnimationOptimized: (optimization) => console.log('Animation optimized:', optimization)
+    }
+  )
+
+  const batteryConsciousLoading = useBatteryConsciousLoading(
+    {
+      enableBatteryMonitoring: true,
+      enableLoadingOptimization: true,
+      enablePerformanceAdjustment: true,
+      enableUserNotification: true,
+      enableAutoOptimization: true
+    },
+    {
+      onBatteryLevelChanged: (batteryState) => console.log('Battery level changed:', batteryState),
+      onLoadingOptimized: (optimization) => console.log('Loading optimized for battery:', optimization),
+      onPerformanceAdjusted: (adjustment) => console.log('Performance adjusted:', adjustment),
+      onUserNotified: (notification) => console.log('User notified:', notification)
+    }
+  )
+
+  const loadingAccessibility = useLoadingAccessibility(
+    {
+      enableScreenReaderSupport: true,
+      enableReducedMotionSupport: true,
+      enableFocusManagement: true,
+      enableAriaSupport: true,
+      enableVoiceControl: true,
+      enableHighContrast: true,
+      enableKeyboardNavigation: true
+    },
+    {
+      onScreenReaderEnhanced: (feature) => console.log('Screen reader enhanced:', feature),
+      onReducedMotionApplied: (feature) => console.log('Reduced motion applied:', feature),
+      onFocusManaged: (feature) => console.log('Focus managed:', feature),
+      onAriaEnhanced: (feature) => console.log('ARIA enhanced:', feature),
+      onVoiceControlEnabled: (feature) => console.log('Voice control enabled:', feature),
+      onHighContrastApplied: (feature) => console.log('High contrast applied:', feature),
+      onKeyboardNavigationEnabled: (feature) => console.log('Keyboard navigation enabled:', feature)
+    }
+  )
+
+  // Simulate loading progress
+  useEffect(() => {
+    if (isLoading) {
+      const interval = setInterval(() => {
+        setLoadingProgress(prev => {
+          if (prev >= 100) {
+            setIsLoading(false)
+            setLoadingProgress(0)
+            return 0
+          }
+          return prev + 10
+        })
+      }, 200)
+      return () => clearInterval(interval)
+    }
+  }, [isLoading])
+
+  // Start loading simulation
+  const startLoading = () => {
+    setIsLoading(true)
+    setLoadingProgress(0)
+  }
+
+  // Toggle skeleton visibility
+  const toggleSkeletons = () => {
+    setShowSkeletons(!showSkeletons)
+  }
+
+  // Get device-specific loading class
+  const getLoadingStateClass = () => {
+    switch (deviceLoadingStates.deviceState.deviceType) {
+      case 'mobile': return 'loading-state-mobile'
+      case 'tablet': return 'loading-state-tablet'
+      case 'desktop': return 'loading-state-desktop'
+      default: return 'loading-state-mobile'
+    }
+  }
+
+  // Get battery-conscious class
+  const getBatteryClass = () => {
+    const batteryStatus = batteryConsciousLoading.batteryState.status
+    if (batteryStatus === 'critical') return 'battery-critical'
+    if (batteryStatus === 'low') return 'battery-low'
+    return ''
+  }
+
+  // Get performance class
+  const getPerformanceClass = () => {
+    const performanceHealth = loadingPerformance.performanceHealth
+    if (performanceHealth === 'poor') return 'performance-low'
+    if (performanceHealth === 'fair') return 'performance-medium'
+    return 'performance-high'
+  }
+
+  // Get accessibility class
+  const getAccessibilityClass = () => {
+    if (loadingAccessibility.accessibilityScore >= 80) return 'accessibility-enhanced'
+    return ''
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="text-center">
+        <h2 className="text-2xl font-bold text-gray-900 mb-2">
+          📱 Mobile Skeleton & Loading State Sophistication
+        </h2>
+        <p className="text-gray-600 mb-4">
+          Advanced mobile-optimized skeleton components with device-specific loading states, 
+          performance optimization, battery consciousness, and accessibility support.
+        </p>
+        <Badge variant="secondary">Story 11 Implementation</Badge>
+      </div>
+
+      {/* Main Demo */}
+      <Card className="p-6">
+        {/* Navigation */}
+        <div className="flex flex-wrap gap-2 mb-6">
+          <Button 
+            variant={activeTab === 'overview' ? 'default' : 'outline'}
+            onClick={() => setActiveTab('overview')}
+            size="sm"
+          >
+            Overview
+          </Button>
+          <Button 
+            variant={activeTab === 'skeletons' ? 'default' : 'outline'}
+            onClick={() => setActiveTab('skeletons')}
+            size="sm"
+          >
+            Skeletons
+          </Button>
+          <Button 
+            variant={activeTab === 'loading' ? 'default' : 'outline'}
+            onClick={() => setActiveTab('loading')}
+            size="sm"
+          >
+            Loading States
+          </Button>
+          <Button 
+            variant={activeTab === 'performance' ? 'default' : 'outline'}
+            onClick={() => setActiveTab('performance')}
+            size="sm"
+          >
+            Performance
+          </Button>
+          <Button 
+            variant={activeTab === 'accessibility' ? 'default' : 'outline'}
+            onClick={() => setActiveTab('accessibility')}
+            size="sm"
+          >
+            Accessibility
+          </Button>
+        </div>
+
+        {/* Overview Section */}
+        {activeTab === 'overview' && (
+          <div className="space-y-6">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+              {/* Device State */}
+              <div className="p-4 bg-blue-50 rounded-lg">
+                <h3 className="font-semibold text-blue-900 mb-2">Device State</h3>
+                <div className="space-y-1 text-sm">
+                  <p><span className="font-medium">Type:</span> {deviceLoadingStates.deviceState.deviceType}</p>
+                  <p><span className="font-medium">Orientation:</span> {deviceLoadingStates.deviceState.orientation}</p>
+                  <p><span className="font-medium">Screen:</span> {deviceLoadingStates.deviceState.screenSize}</p>
+                  <p><span className="font-medium">Strategy:</span> {deviceLoadingStates.deviceState.loadingStates[0]?.type || 'skeleton'}</p>
+                </div>
+              </div>
+
+              {/* Battery Status */}
+              <div className="p-4 bg-yellow-50 rounded-lg">
+                <h3 className="font-semibold text-yellow-900 mb-2">Battery Status</h3>
+                <div className="space-y-1 text-sm">
+                  <p><span className="font-medium">Level:</span> {batteryConsciousLoading.getBatteryPercentage()}%</p>
+                  <p><span className="font-medium">Status:</span> {batteryConsciousLoading.batteryState.status}</p>
+                  <p><span className="font-medium">Mode:</span> {batteryConsciousLoading.performanceMode}</p>
+                  <p><span className="font-medium">Savings:</span> {batteryConsciousLoading.batterySavings}%</p>
+                </div>
+              </div>
+
+              {/* Performance Metrics */}
+              <div className="p-4 bg-green-50 rounded-lg">
+                <h3 className="font-semibold text-green-900 mb-2">Performance</h3>
+                <div className="space-y-1 text-sm">
+                  <p><span className="font-medium">FPS:</span> {loadingPerformance.performanceMetrics.frameRate}</p>
+                  <p><span className="font-medium">Render:</span> {Math.round(loadingPerformance.performanceMetrics.renderTime)}ms</p>
+                  <p><span className="font-medium">Memory:</span> {loadingPerformance.performanceMetrics.memoryUsage}MB</p>
+                  <p><span className="font-medium">Health:</span> {loadingPerformance.performanceHealth}</p>
+                </div>
+              </div>
+
+              {/* Accessibility Score */}
+              <div className="p-4 bg-purple-50 rounded-lg">
+                <h3 className="font-semibold text-purple-900 mb-2">Accessibility</h3>
+                <div className="space-y-1 text-sm">
+                  <p><span className="font-medium">Score:</span> {loadingAccessibility.accessibilityScore}%</p>
+                  <p><span className="font-medium">Features:</span> {loadingAccessibility.accessibilityFeatures.length}</p>
+                  <p><span className="font-medium">Active:</span> {loadingAccessibility.activeFeatures.length}</p>
+                  <p><span className="font-medium">Enhancing:</span> {loadingAccessibility.isEnhancing ? 'Yes' : 'No'}</p>
+                </div>
+              </div>
+            </div>
+
+            {/* Controls */}
+            <div className="flex flex-wrap gap-4 justify-center">
+              <Button onClick={startLoading} disabled={isLoading}>
+                {isLoading ? 'Loading...' : 'Start Loading Simulation'}
+              </Button>
+              <Button onClick={toggleSkeletons} variant="outline">
+                {showSkeletons ? 'Hide' : 'Show'} Skeletons
+              </Button>
+              <Button onClick={loadingPerformance.autoOptimize} variant="outline">
+                Auto-Optimize Performance
+              </Button>
+              <Button onClick={batteryConsciousLoading.optimizeLoadingForBattery} variant="outline">
+                Optimize for Battery
+              </Button>
+              <Button onClick={loadingAccessibility.autoEnableAccessibility} variant="outline">
+                Enable All Accessibility
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* Skeletons Section */}
+        {activeTab === 'skeletons' && (
+          <div className="space-y-6">
+            <div className="text-center mb-6">
+              <h3 className="text-xl font-semibold mb-2">Mobile-Optimized Skeleton Components</h3>
+              <p className="text-gray-600">
+                Device-specific skeleton variants with performance optimization and touch-friendly interactions
+              </p>
+            </div>
+
+            <div className={`${getLoadingStateClass()} ${getBatteryClass()} ${getPerformanceClass()} ${getAccessibilityClass()}`}>
+              {showSkeletons && (
+                <>
+                  {/* Text Line Skeletons */}
+                  <div className="loading-skeleton">
+                    <div className="mobile-skeleton text-line animation-pulse touch-friendly" 
+                         aria-label="Loading text line 1"></div>
+                    <div className="mobile-skeleton text-line animation-pulse touch-friendly" 
+                         aria-label="Loading text line 2"></div>
+                    <div className="mobile-skeleton text-line animation-pulse touch-friendly" 
+                         aria-label="Loading text line 3"></div>
+                  </div>
+
+                  {/* Avatar and Button Skeletons */}
+                  <div className="flex items-center gap-4">
+                    <div className="mobile-skeleton avatar animation-shimmer touch-friendly" 
+                         aria-label="Loading avatar"></div>
+                    <div className="mobile-skeleton button animation-pulse touch-friendly" 
+                         aria-label="Loading button"></div>
+                  </div>
+
+                  {/* Card Skeleton */}
+                  <div className="mobile-skeleton card animation-wave touch-friendly" 
+                       aria-label="Loading card content"></div>
+                </>
+              )}
+            </div>
+
+            {/* Skeleton Variants */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="p-4 bg-gray-50 rounded-lg">
+                <h4 className="font-semibold mb-2">Available Skeleton Variants</h4>
+                <div className="space-y-2 text-sm">
+                  {mobileSkeleton.skeletonVariants.map(variant => (
+                    <div key={variant.id} className="flex justify-between items-center">
+                      <span>{variant.name}</span>
+                      <Badge variant={variant.mobileOptimized ? "default" : "secondary"}>
+                        {variant.animation}
+                      </Badge>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              <div className="p-4 bg-gray-50 rounded-lg">
+                <h4 className="font-semibold mb-2">Device Optimizations</h4>
+                <div className="space-y-2 text-sm">
+                  <p><span className="font-medium">Mobile Optimized:</span> {mobileSkeleton.isMobileOptimized() ? 'Yes' : 'No'}</p>
+                  <p><span className="font-medium">Loading Strategy:</span> {mobileSkeleton.getLoadingStrategy()}</p>
+                  <p><span className="font-medium">Animation Intensity:</span> {mobileSkeleton.getAnimationIntensity()}</p>
+                  <p><span className="font-medium">Touch Friendly:</span> {mobileSkeleton.skeletonVariants.some(v => v.touchFriendly) ? 'Yes' : 'No'}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Loading States Section */}
+        {activeTab === 'loading' && (
+          <div className="space-y-6">
+            <div className="text-center mb-6">
+              <h3 className="text-xl font-semibold mb-2">Device-Specific Loading States</h3>
+              <p className="text-gray-600">
+                Adaptive loading states that automatically adjust based on device capabilities and battery level
+              </p>
+            </div>
+
+            {/* Loading Progress */}
+            {isLoading && (
+              <div className="space-y-4">
+                <div className="loading-progress">
+                  <div 
+                    className="loading-progress-bar" 
+                    style={{ width: `${loadingProgress}%` }}
+                    aria-label={`Loading progress: ${loadingProgress}%`}
+                  ></div>
+                </div>
+                <p className="text-center text-sm text-gray-600">
+                  Loading... {loadingProgress}%
+                </p>
+              </div>
+            )}
+
+            {/* Device Loading States */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div className="space-y-4">
+                <h4 className="font-semibold">Current Device State</h4>
+                <div className="p-4 bg-blue-50 rounded-lg space-y-2">
+                  <p><span className="font-medium">Device:</span> {deviceLoadingStates.deviceState.deviceType}</p>
+                  <p><span className="font-medium">Orientation:</span> {deviceLoadingStates.deviceState.orientation}</p>
+                  <p><span className="font-medium">Performance:</span> {deviceLoadingStates.deviceState.performanceLevel}</p>
+                  <p><span className="font-medium">Battery:</span> {deviceLoadingStates.deviceState.batteryLevel}</p>
+                  <p><span className="font-medium">Adaptive:</span> {deviceLoadingStates.deviceState.adaptiveBehavior ? 'Yes' : 'No'}</p>
+                </div>
+              </div>
+
+              <div className="space-y-4">
+                <h4 className="font-semibold">Available Loading States</h4>
+                <div className="space-y-2">
+                  {deviceLoadingStates.getLoadingStatesForDevice().map(state => (
+                    <div key={state.id} className="p-3 bg-gray-50 rounded-lg">
+                      <div className="flex justify-between items-center mb-1">
+                        <span className="font-medium">{state.name}</span>
+                        <Badge variant="outline">{state.type}</Badge>
+                      </div>
+                      <div className="text-sm text-gray-600">
+                        <p>Duration: {state.duration}ms</p>
+                        <p>Complexity: {state.complexity}</p>
+                        <p>Performance: {state.performance}</p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            {/* Loading State Controls */}
+            <div className="flex flex-wrap gap-4 justify-center">
+              <Button onClick={deviceLoadingStates.enableAdaptiveBehavior} variant="outline">
+                Enable Adaptive Behavior
+              </Button>
+              <Button onClick={deviceLoadingStates.adaptToPerformance} variant="outline">
+                Adapt to Performance
+              </Button>
+              <Button onClick={deviceLoadingStates.clearAdaptations} variant="outline">
+                Clear Adaptations
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* Performance Section */}
+        {activeTab === 'performance' && (
+          <div className="space-y-6">
+            <div className="text-center mb-6">
+              <h3 className="text-xl font-semibold mb-2">Loading Performance Optimization</h3>
+              <p className="text-gray-600">
+                Real-time performance monitoring with automatic optimization and battery-conscious strategies
+              </p>
+            </div>
+
+            {/* Performance Metrics */}
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+              <div className="metric-item">
+                <div className="metric-value">{loadingPerformance.performanceMetrics.frameRate}</div>
+                <div className="metric-label">FPS</div>
+              </div>
+              <div className="metric-item">
+                <div className="metric-value">{Math.round(loadingPerformance.performanceMetrics.renderTime)}ms</div>
+                <div className="metric-label">Render Time</div>
+              </div>
+              <div className="metric-item">
+                <div className="metric-value">{loadingPerformance.performanceMetrics.memoryUsage}MB</div>
+                <div className="metric-label">Memory</div>
+              </div>
+              <div className="metric-item">
+                <div className="metric-value">{loadingPerformance.getPerformanceScore()}</div>
+                <div className="metric-label">Score</div>
+              </div>
+            </div>
+
+            {/* Performance Health */}
+            <div className="p-4 bg-gray-50 rounded-lg">
+              <h4 className="font-semibold mb-3">Performance Health: {loadingPerformance.performanceHealth}</h4>
+              <div className="space-y-2">
+                {loadingPerformance.getOptimizationRecommendations().map((recommendation, index) => (
+                  <p key={index} className="text-sm text-gray-600">• {recommendation}</p>
+                ))}
+              </div>
+            </div>
+
+            {/* Optimization Strategies */}
+            <div className="space-y-4">
+              <h4 className="font-semibold">Applied Optimizations</h4>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                {loadingPerformance.optimizationStrategies.map(strategy => (
+                  <div key={strategy.id} className="p-3 bg-green-50 rounded-lg">
+                    <div className="flex justify-between items-center mb-1">
+                      <span className="font-medium">{strategy.name}</span>
+                      <Badge variant={strategy.impact === 'high' ? 'default' : 'secondary'}>
+                        {strategy.impact}
+                      </Badge>
+                    </div>
+                    <p className="text-sm text-gray-600">{strategy.description}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Performance Controls */}
+            <div className="flex flex-wrap gap-4 justify-center">
+              <Button onClick={loadingPerformance.optimizeAnimations} variant="outline">
+                Optimize Animations
+              </Button>
+              <Button onClick={loadingPerformance.optimizeMemory} variant="outline">
+                Optimize Memory
+              </Button>
+              <Button onClick={loadingPerformance.optimizeBattery} variant="outline">
+                Optimize Battery
+              </Button>
+              <Button onClick={loadingPerformance.optimizePerformance} variant="outline">
+                Optimize Overall
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* Accessibility Section */}
+        {activeTab === 'accessibility' && (
+          <div className="space-y-6">
+            <div className="text-center mb-6">
+              <h3 className="text-xl font-semibold mb-2">Loading Accessibility Support</h3>
+              <p className="text-gray-600">
+                Comprehensive accessibility features including screen reader support, reduced motion, focus management, and ARIA
+              </p>
+            </div>
+
+            {/* Accessibility Score */}
+            <div className="text-center p-6 bg-purple-50 rounded-lg">
+              <div className="text-4xl font-bold text-purple-600 mb-2">
+                {loadingAccessibility.accessibilityScore}%
+              </div>
+              <p className="text-purple-700 font-medium">Accessibility Score</p>
+            </div>
+
+            {/* Accessibility State */}
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+              <div className="metric-item">
+                <div className="metric-value">{loadingAccessibility.accessibilityState.screenReaderActive ? '✓' : '✗'}</div>
+                <div className="metric-label">Screen Reader</div>
+              </div>
+              <div className="metric-item">
+                <div className="metric-value">{loadingAccessibility.accessibilityState.reducedMotionEnabled ? '✓' : '✗'}</div>
+                <div className="metric-label">Reduced Motion</div>
+              </div>
+              <div className="metric-item">
+                <div className="metric-value">{loadingAccessibility.accessibilityState.ariaLabelsActive ? '✓' : '✗'}</div>
+                <div className="metric-label">ARIA Labels</div>
+              </div>
+              <div className="metric-item">
+                <div className="metric-value">{loadingAccessibility.accessibilityState.keyboardNavigationActive ? '✓' : '✗'}</div>
+                <div className="metric-label">Keyboard Nav</div>
+              </div>
+            </div>
+
+            {/* Accessibility Features */}
+            <div className="space-y-4">
+              <h4 className="font-semibold">Active Accessibility Features</h4>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                {loadingAccessibility.accessibilityFeatures.map(feature => (
+                  <div key={feature.id} className="p-3 bg-purple-50 rounded-lg">
+                    <div className="flex justify-between items-center mb-1">
+                      <span className="font-medium">{feature.name}</span>
+                      <Badge variant={feature.impact === 'high' ? 'default' : 'secondary'}>
+                        {feature.impact}
+                      </Badge>
+                    </div>
+                    <p className="text-sm text-gray-600">{feature.description}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Accessibility Recommendations */}
+            <div className="p-4 bg-blue-50 rounded-lg">
+              <h4 className="font-semibold mb-3">Accessibility Recommendations</h4>
+              <div className="space-y-2">
+                {loadingAccessibility.getAccessibilityRecommendations().map((recommendation, index) => (
+                  <p key={index} className="text-sm text-gray-600">• {recommendation}</p>
+                ))}
+              </div>
+            </div>
+
+            {/* Accessibility Controls */}
+            <div className="flex flex-wrap gap-4 justify-center">
+              <Button onClick={loadingAccessibility.enableScreenReaderSupport} variant="outline">
+                Enable Screen Reader
+              </Button>
+              <Button onClick={loadingAccessibility.enableReducedMotionSupport} variant="outline">
+                Enable Reduced Motion
+              </Button>
+              <Button onClick={loadingAccessibility.enableAriaSupport} variant="outline">
+                Enable ARIA Support
+              </Button>
+              <Button onClick={loadingAccessibility.enableKeyboardNavigation} variant="outline">
+                Enable Keyboard Nav
+              </Button>
+            </div>
+          </div>
+        )}
+      </Card>
+
+      {/* Status Indicators */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        <div className={`loading-status ${getBatteryClass()}`}>
+          <div className="w-3 h-3 bg-current rounded-full"></div>
+          <span className="text-sm font-medium">
+            Battery: {batteryConsciousLoading.getBatteryStatus()}
+          </span>
+        </div>
+
+        <div className={`loading-status ${getPerformanceClass()}`}>
+          <div className="w-3 h-3 bg-current rounded-full"></div>
+          <span className="text-sm font-medium">
+            Performance: {loadingPerformance.performanceHealth}
+          </span>
+        </div>
+
+        <div className={`loading-status ${getAccessibilityClass()}`}>
+          <div className="w-3 h-3 bg-current rounded-full"></div>
+          <span className="text-sm font-medium">
+            Accessibility: {loadingAccessibility.accessibilityScore}%
+          </span>
+        </div>
+
+        <div className="loading-status">
+          <div className="w-3 h-3 bg-current rounded-full"></div>
+          <span className="text-sm font-medium">
+            Device: {deviceLoadingStates.deviceState.deviceType}
+          </span>
+        </div>
+      </div>
+
+      {/* Notifications */}
+      {batteryConsciousLoading.notifications.length > 0 && (
+        <div className="space-y-2">
+          <h4 className="font-semibold">Recent Notifications</h4>
+          {batteryConsciousLoading.notifications.slice(-3).map((notification, index) => (
+            <div key={index} className="p-3 bg-blue-50 border border-blue-200 rounded-lg">
+              <p className="text-sm text-blue-800">{notification}</p>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default MobileSkeletonLoadingDemo