107 lines
3.5 KiB
Markdown
107 lines
3.5 KiB
Markdown
# 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
|