update

gnx-react/components/shared/layout/README-Preloader.md

@@ -0,0 +1,106 @@
+# Preloader Component Documentation
+
+## Overview
+The Preloader component provides a sophisticated, enterprise-grade loading experience for the GNX React application. It features a compact design with the company logo, shine effects, and smooth animations that activate during page transitions.
+
+## Features
+
+### 🎨 Enterprise Design
+- **Compact Layout**: Minimal, professional design that doesn't overwhelm users
+- **Company Logo**: Features the GNX logo with floating animation
+- **Shine Effect**: Animated shine effect that sweeps across the logo periodically
+- **Dark Theme**: Professional dark gradient background with subtle transparency
+
+### ⚡ Smart Loading Logic
+- **Initial Load**: Shows for 1.5 seconds on first page load
+- **Page Transitions**: Activates automatically when navigating between pages
+- **Progress Bar**: Realistic loading progress with gradient colors
+- **Smooth Transitions**: Fade-in/out animations for seamless user experience
+
+### 📱 Responsive Design
+- **Mobile Optimized**: Scales appropriately on all device sizes
+- **Touch Friendly**: Optimized for mobile interactions
+- **Performance**: Lightweight animations that don't impact performance
+
+## Components
+
+### 1. Preloader.tsx
+Main preloader component that handles the loading UI and animations.
+
+**Key Features:**
+- Logo with shine effect animation
+- Progress bar with gradient fill
+- Loading dots animation
+- Enterprise tagline
+- Responsive design
+
+### 2. LayoutWrapper.tsx
+Wrapper component that integrates the preloader with the main layout.
+
+### 3. usePageTransition.ts
+Custom hook that manages page transition states and progress.
+
+**Hook Methods:**
+- `isTransitioning`: Boolean indicating if a transition is active
+- `progress`: Current loading progress (0-100)
+- `startTransition()`: Initiates a new page transition
+- `updateProgress()`: Updates the loading progress
+- `completeTransition()`: Marks transition as complete
+
+## Usage
+
+The preloader is automatically integrated into the main layout and requires no additional setup. It will:
+
+1. **Show on initial page load** for 1.5 seconds
+2. **Activate on page navigation** with realistic loading simulation
+3. **Display progress** with animated progress bar
+4. **Hide smoothly** when loading is complete
+
+## Customization
+
+### Logo
+To change the logo, update the image path in the Preloader component:
+```tsx
+<Image 
+  src="/images/logo.png"  // Update this path
+  alt="GNX Logo" 
+  width={80}
+  height={60}
+  className="logo-image"
+  priority
+/>
+```
+
+### Colors
+The preloader uses CSS custom properties that can be customized:
+- Background gradient colors
+- Progress bar gradient
+- Text colors and opacity
+
+### Timing
+Adjust timing in the usePageTransition hook:
+- Initial load duration: 1500ms
+- Transition duration: 600-1000ms (randomized)
+- Progress update interval: 100ms
+
+## Performance Considerations
+
+- **Optimized Animations**: Uses CSS transforms and opacity for smooth performance
+- **Minimal DOM**: Lightweight component structure
+- **Smart Loading**: Only shows when necessary (transitions)
+- **Memory Efficient**: Proper cleanup of timers and intervals
+
+## Browser Support
+
+- **Modern Browsers**: Full support for Chrome, Firefox, Safari, Edge
+- **Mobile Browsers**: Optimized for iOS Safari and Chrome Mobile
+- **Fallbacks**: Graceful degradation for older browsers
+
+## Future Enhancements
+
+Potential improvements for future versions:
+- Custom loading messages per page
+- Brand-specific color themes
+- Loading state indicators for API calls
+- Accessibility improvements (reduced motion support)
+- Analytics integration for loading performance