# 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