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

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:

<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